/* =========================================================
   MyVoyage Sea — More Menu
   2026-08-22 v101
   Mobile-first, light/dark, touch-friendly.
   Presentation-only: preserves existing More menu behavior.
   ========================================================= */

#mobile-more-backdrop.mobile-more-backdrop{
  --mvs-sea:#18aeea;
  --mvs-violet:#075ba9; /* Sea Theme deep ocean blue (legacy variable name retained) */
  --mvs-ink:var(--text, #0f172a);
  --mvs-muted:var(--muted, #64748b);
  --mvs-card:color-mix(in srgb, var(--surface-2, #fff) 94%, #dff6ff 6%);
  --mvs-line:color-mix(in srgb, var(--surface-border, #d8e0ea) 72%, #62d5ff 28%);
  --mvs-soft:color-mix(in srgb, var(--surface-2, #fff) 88%, #dff7ff 12%);
  background:rgba(8,18,37,.64) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

#mobile-more-backdrop .mobile-more-sheet{
  background:var(--surface-2, #fff) !important;
  border:1px solid color-mix(in srgb, var(--surface-border, #d8e0ea) 72%, #68d8ff 28%) !important;
  box-shadow:0 28px 90px rgba(2,8,23,.30) !important;
}

#mobile-more-backdrop .mobile-more-hdr{
  min-height:78px;
  padding:16px 18px !important;
  border-bottom:1px solid var(--mvs-line) !important;
  background:
    radial-gradient(circle at 0 0, rgba(52,211,255,.12), transparent 42%),
    radial-gradient(circle at 100% 0, rgba(8,120,189,.09), transparent 44%),
    var(--surface-2, #fff) !important;
}

#mobile-more-backdrop .mobile-more-title{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:3px;
  font-size:1.22rem !important;
  line-height:1.15;
  font-weight:850 !important;
  letter-spacing:-.02em !important;
  color:var(--mvs-ink) !important;
}
#mobile-more-backdrop .mobile-more-title::before{
  content:"⚙️  MYVOYAGE SEA";
  display:block;
  font-size:.68rem;
  font-weight:900;
  letter-spacing:.16em;
  color:#109fd3;
}
#mobile-more-backdrop .mobile-more-title::after{
  content:"More" !important;
  font-size:1.22rem;
  font-weight:850 !important;
  color:var(--mvs-ink) !important;
}
/* Hide original text visually because ::after supplies the title. */
#mobile-more-backdrop .mobile-more-title{
  font-size:0 !important;
}

#mobile-more-backdrop .mobile-more-close{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  padding:0 !important;
  border-radius:16px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:1.08rem !important;
  background:color-mix(in srgb, var(--surface-2, #fff) 92%, #eaf8ff 8%) !important;
  border:1px solid color-mix(in srgb, var(--surface-border, #d8e0ea) 70%, #6fdcff 30%) !important;
  color:var(--mvs-ink) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.07) !important;
}

#mobile-more-backdrop .mobile-more-sections{
  padding:14px 14px calc(26px + env(safe-area-inset-bottom)) !important;
  gap:14px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2, #fff) 94%, #e8f8ff 6%), var(--surface-2, #fff));
}

#mobile-more-backdrop .mobile-more-section{
  margin:0 !important;
  padding:14px !important;
  border:1px solid var(--mvs-line) !important;
  border-radius:22px !important;
  background:var(--mvs-card) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.055) !important;
}
#mobile-more-backdrop .mobile-more-section:first-child{
  padding-top:14px !important;
}

#mobile-more-backdrop .mobile-more-section-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 12px !important;
  padding:0 2px 10px !important;
  border-bottom:1px solid color-mix(in srgb, var(--surface-border, #d8e0ea) 75%, transparent 25%);
  color:var(--mvs-ink) !important;
  font-size:.76rem !important;
  line-height:1;
  font-weight:900 !important;
  letter-spacing:.16em !important;
}
#mobile-more-backdrop .mobile-more-section-title::before{
  width:34px;
  height:34px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  font-size:1rem;
  letter-spacing:0;
  background:linear-gradient(145deg, rgba(61,213,255,.15), rgba(7,91,169,.10));
  border:1px solid rgba(56,189,248,.24);
}
#mobile-more-backdrop .mobile-more-section:nth-of-type(1) .mobile-more-section-title::before{content:"✨";}
#mobile-more-backdrop .mobile-more-section:nth-of-type(2) .mobile-more-section-title::before{content:"🔔";}
#mobile-more-backdrop .mobile-more-section:nth-of-type(3) .mobile-more-section-title::before{content:"📁";}
#mobile-more-backdrop .mobile-more-support-section .mobile-more-section-title::before{content:"☕";}
#mobile-more-backdrop .mobile-more-section:nth-of-type(5) .mobile-more-section-title::before{content:"❓";}

#mobile-more-backdrop .mobile-more-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:9px !important;
  padding:0 !important;
}

#mobile-more-backdrop .mobile-more-grid > .btn,
#mobile-more-backdrop .mobile-more-submenu-toggle{
  width:100% !important;
  min-height:56px !important;
  margin:0 !important;
  padding:12px 15px !important;
  justify-content:flex-start !important;
  text-align:left !important;
  border-radius:17px !important;
  border:1px solid color-mix(in srgb, var(--surface-border, #d8e0ea) 88%, #a9dff1 12%) !important;
  background:color-mix(in srgb, var(--surface-2, #fff) 97%, #e8f8ff 3%) !important;
  color:var(--mvs-ink) !important;
  font-weight:760 !important;
  box-shadow:0 4px 12px rgba(15,23,42,.035) !important;
  transition:transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease !important;
}
#mobile-more-backdrop .mobile-more-grid > .btn:hover,
#mobile-more-backdrop .mobile-more-grid > .btn:focus-visible,
#mobile-more-backdrop .mobile-more-submenu-toggle:hover,
#mobile-more-backdrop .mobile-more-submenu-toggle:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(56,189,248,.62) !important;
  background:color-mix(in srgb, var(--surface-2, #fff) 90%, #ddf6ff 10%) !important;
  box-shadow:0 8px 18px rgba(14,116,144,.09) !important;
}
#mobile-more-backdrop .mobile-more-grid > .btn:active,
#mobile-more-backdrop .mobile-more-submenu-toggle:active{
  transform:scale(.985);
}

/* Keep old semantic primary classes from turning isolated buttons blue. */
#mobile-more-backdrop .mobile-more-grid > .btn.btn-primary{
  background:color-mix(in srgb, var(--surface-2, #fff) 97%, #e8f8ff 3%) !important;
  color:var(--mvs-ink) !important;
}

/* v257 — Sea Theme support section + More menu refinement. */
#mobile-more-backdrop .mobile-more-support-section{
  background:
    radial-gradient(circle at 8% 0%, rgba(24,174,234,.10), transparent 34%),
    var(--mvs-card) !important;
}
#mobile-more-backdrop .mobile-more-support-section .mobile-more-section-title{
  color:#075ba9 !important;
}
#mobile-more-backdrop .mobile-more-support-btn{
  position:relative;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;
  min-height:58px !important;
  padding:14px 18px !important;
  text-align:center !important;
  color:#fff !important;
  background:linear-gradient(135deg,#075ba9 0%,#0878bd 100%) !important;
  border:1px solid rgba(7,91,169,.38) !important;
  box-shadow:0 10px 24px rgba(7,91,169,.20) !important;
  font-weight:850 !important;
}
#mobile-more-backdrop .mobile-more-support-btn:hover,
#mobile-more-backdrop .mobile-more-support-btn:focus-visible{
  color:#fff !important;
  background:linear-gradient(135deg,#064f93 0%,#0871b3 100%) !important;
  border-color:rgba(7,91,169,.58) !important;
  box-shadow:0 12px 28px rgba(7,91,169,.26) !important;
}
#mobile-more-backdrop .mobile-more-external{
  margin-left:auto;
  font-size:1.05em;
  opacity:.92;
}

/* Sea Theme: cleaner hierarchy and calmer surfaces throughout More. */
#mobile-more-backdrop .mobile-more-sheet{
  overflow:hidden !important;
}
#mobile-more-backdrop .mobile-more-sections{
  scrollbar-color:rgba(7,120,189,.35) transparent;
}
#mobile-more-backdrop .mobile-more-section-title{
  text-transform:uppercase;
}
#mobile-more-backdrop .mobile-more-grid > .btn{
  letter-spacing:-.005em;
}
html[data-theme="dark"] #mobile-more-backdrop .mobile-more-support-section,
body.dark #mobile-more-backdrop .mobile-more-support-section,
.dark-mode #mobile-more-backdrop .mobile-more-support-section{
  background:
    radial-gradient(circle at 8% 0%, rgba(24,174,234,.12), transparent 34%),
    var(--mvs-card) !important;
}
html[data-theme="dark"] #mobile-more-backdrop .mobile-more-support-section .mobile-more-section-title,
body.dark #mobile-more-backdrop .mobile-more-support-section .mobile-more-section-title,
.dark-mode #mobile-more-backdrop .mobile-more-support-section .mobile-more-section-title{
  color:#7dd3fc !important;
}

#mobile-more-backdrop .mobile-more-submenu{
  margin-top:2px;
  border:0 !important;
  background:transparent !important;
}
#mobile-more-backdrop .mobile-more-submenu-toggle{
  list-style:none;
  cursor:pointer;
}
#mobile-more-backdrop .mobile-more-submenu-toggle::-webkit-details-marker{display:none;}
#mobile-more-backdrop .mobile-more-submenu-toggle::after{
  content:"⌄";
  margin-left:auto;
  font-size:1.15rem;
  color:var(--mvs-muted);
}
#mobile-more-backdrop .mobile-more-submenu[open] .mobile-more-submenu-toggle::after{content:"⌃";}
#mobile-more-backdrop .mobile-more-submenu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:9px 0 0 !important;
}
#mobile-more-backdrop .mobile-more-submenu-grid .btn{
  min-height:50px !important;
  border-radius:15px !important;
  background:var(--mvs-soft) !important;
  color:var(--mvs-ink) !important;
  border:1px solid color-mix(in srgb, var(--surface-border, #d8e0ea) 86%, #bdeaff 14%) !important;
  font-weight:720 !important;
}

/* Desktop: a purposeful MyVoyage Sea utility panel rather than a stretched mobile sheet. */
@media (min-width:641px){
  #mobile-more-backdrop.mobile-more-backdrop{
    align-items:flex-start !important;
    justify-content:flex-end !important;
    padding:88px max(22px, calc((100vw - 1180px)/2 + 20px)) 24px 24px !important;
  }
  #mobile-more-backdrop .mobile-more-sheet{
    width:min(520px, calc(100vw - 48px)) !important;
    height:min(82vh, 820px) !important;
    max-height:820px !important;
    border-radius:26px !important;
  }
  #mobile-more-backdrop .mobile-more-grid{
    grid-template-columns:1fr 1fr !important;
  }
  #mobile-more-backdrop .mobile-more-section:nth-of-type(3) .mobile-more-grid > :last-child,
  #mobile-more-backdrop .mobile-more-support-section .mobile-more-grid > *,
  #mobile-more-backdrop .mobile-more-section:nth-of-type(5) .mobile-more-grid > .mobile-more-submenu{
    grid-column:1 / -1;
  }
  #mobile-more-backdrop .mobile-more-title::after{content:"More menu" !important;}
}

/* Phone/PWA: full-height sheet, safe areas, generous touch targets. */
@media (max-width:640px){
  #mobile-more-backdrop.mobile-more-backdrop{
    padding:calc(env(safe-area-inset-top) + 8px) 8px calc(76px + env(safe-area-inset-bottom)) !important;
  }
  #mobile-more-backdrop .mobile-more-sheet{
    width:100% !important;
    height:100% !important;
    border-radius:24px !important;
  }
  #mobile-more-backdrop .mobile-more-hdr{
    min-height:76px;
    padding:14px 14px !important;
  }
  #mobile-more-backdrop .mobile-more-section{
    border-radius:20px !important;
  }
}

@media (max-width:390px){
  #mobile-more-backdrop .mobile-more-submenu-grid{grid-template-columns:1fr;}
}

/* Dark mode — explicit tuning for contrast and depth. */
html[data-theme="dark"] #mobile-more-backdrop.mobile-more-backdrop,
body.dark #mobile-more-backdrop.mobile-more-backdrop,
.dark-mode #mobile-more-backdrop.mobile-more-backdrop{
  --mvs-card:color-mix(in srgb, var(--surface-2, #111827) 93%, #083344 7%);
  --mvs-soft:color-mix(in srgb, var(--surface-2, #111827) 91%, #0c4a6e 9%);
  --mvs-line:color-mix(in srgb, var(--surface-border, #334155) 70%, #1daee8 30%);
  background:rgba(0,5,16,.76) !important;
}

@media (prefers-reduced-motion:reduce){
  #mobile-more-backdrop .mobile-more-grid > .btn,
  #mobile-more-backdrop .mobile-more-submenu-toggle{transition:none !important;}
}

/* =========================================================
   MyVoyage Sea — Cruise Log / Voyage Map — v105
   Presentation only. Leaflet IDs, route controls and JS hooks unchanged.
========================================================= */
#view-ports .cruise-log-map-card{
  --mvs-map-cyan:#20b8ea;
  --mvs-map-violet:#075ba9; /* Sea Theme deep ocean blue */
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 72%, var(--mvs-map-cyan) 28%) !important;
  border-radius:26px !important;
  background:
    radial-gradient(circle at 7% 0%, rgba(32,184,234,.11), transparent 30%),
    radial-gradient(circle at 94% 2%, rgba(7,91,169,.08), transparent 28%),
    var(--card-bg,#fff) !important;
  box-shadow:0 18px 44px rgba(15,23,42,.09) !important;
}
#view-ports .cruise-log-map-card .cruise-log-section-header{
  padding:22px 24px 18px !important;
  border-bottom:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 80%, var(--mvs-map-cyan) 20%) !important;
  background:linear-gradient(110deg,rgba(32,184,234,.08),rgba(7,91,169,.045) 72%,transparent) !important;
}
#view-ports .cruise-log-map-card .cruise-log-section-eyebrow{
  color:var(--mvs-map-cyan) !important;
  letter-spacing:.17em !important;
}
#view-ports .cruise-log-map-card .cruise-log-section-header h2{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:1.34rem !important;
  font-weight:850 !important;
  color:var(--mvs-ink,var(--text,#0f172a));
}
#view-ports .cruise-log-map-card .cruise-log-section-header h2::before{
  content:"🗺️";
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex:0 0 34px;
  border-radius:11px;
  background:linear-gradient(145deg,rgba(32,184,234,.14),rgba(7,91,169,.10));
  border:1px solid rgba(32,184,234,.25);
  font-size:1rem;
}
#view-ports .cruise-log-map-card .cruise-log-section-header small{
  max-width:780px !important;
  margin-top:8px !important;
  font-size:.86rem !important;
}
#view-ports .cruise-log-map-card #ports-map-toggle{
  min-height:44px !important;
  padding:10px 16px !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#cbd5e1) 76%, var(--mvs-map-cyan) 24%) !important;
  border-radius:15px !important;
  background:color-mix(in srgb, var(--card-bg,#fff) 94%, var(--mvs-map-cyan) 6%) !important;
  box-shadow:0 5px 14px rgba(15,23,42,.05);
  font-weight:800 !important;
}
#view-ports .cruise-log-map-card .ports-map-panel{
  padding:18px 22px 22px !important;
}
#view-ports .cruise-log-map-card .ports-map-wrap{
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 78%, var(--mvs-map-cyan) 22%) !important;
  border-radius:22px !important;
  background:color-mix(in srgb, var(--card-bg,#fff) 96%, var(--mvs-map-cyan) 4%) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.07);
}
#view-ports .cruise-log-map-card #ports-map{
  min-height:360px;
}
#view-ports .cruise-log-map-card .ports-map-legend{
  display:flex !important;
  align-items:center;
  gap:8px 10px !important;
  flex-wrap:wrap;
  padding:11px 13px !important;
  background:linear-gradient(90deg,rgba(32,184,234,.055),rgba(7,91,169,.035)) !important;
}
#view-ports .cruise-log-map-card .ports-map-legend .pml-item{
  min-height:32px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 86%, var(--mvs-map-cyan) 14%);
  background:color-mix(in srgb, var(--card-bg,#fff) 96%, transparent);
  font-size:.76rem;
  font-weight:750;
  color:var(--mvs-muted,var(--muted,#64748b));
}
#view-ports .cruise-log-map-card .ports-map-legend .pml-swatch{
  width:10px !important;
  height:10px !important;
  border-radius:50% !important;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 14%,transparent);
}
#view-ports .cruise-log-map-card .leaflet-control-zoom a{
  border-radius:10px !important;
  color:var(--mvs-ink,#0f172a) !important;
}
#view-ports .cruise-log-map-card .leaflet-control-zoom{
  border:0 !important;
  border-radius:12px !important;
  overflow:hidden;
  box-shadow:0 5px 16px rgba(15,23,42,.16) !important;
}

@media (max-width:700px){
  #view-ports .cruise-log-map-card{border-radius:21px !important;}
  #view-ports .cruise-log-map-card .cruise-log-section-header{padding:16px 14px 14px !important;}
  #view-ports .cruise-log-map-card .cruise-log-section-header h2{font-size:1.12rem !important;}
  #view-ports .cruise-log-map-card .cruise-log-section-header h2::before{width:32px;height:32px;flex-basis:32px;}
  #view-ports .cruise-log-map-card #ports-map-toggle{min-height:42px !important;padding:9px 11px !important;}
  #view-ports .cruise-log-map-card .ports-map-panel{padding:10px 10px 12px !important;}
  #view-ports .cruise-log-map-card .ports-map-wrap{border-radius:17px !important;}
  #view-ports .cruise-log-map-card #ports-map{min-height:310px;}
  #view-ports .cruise-log-map-card .ports-map-legend{padding:9px !important;gap:6px !important;}
  #view-ports .cruise-log-map-card .ports-map-legend .pml-item{padding:5px 8px;font-size:.7rem;}
}

html[data-theme="dark"] #view-ports .cruise-log-map-card,
body.dark #view-ports .cruise-log-map-card,
.dark-mode #view-ports .cruise-log-map-card{
  background:
    radial-gradient(circle at 7% 0%,rgba(32,184,234,.12),transparent 31%),
    radial-gradient(circle at 94% 2%,rgba(7,91,169,.11),transparent 29%),
    var(--card-bg,#111827) !important;
  box-shadow:0 20px 50px rgba(0,0,0,.30) !important;
}
html[data-theme="dark"] #view-ports .cruise-log-map-card .ports-map-legend .pml-item,
body.dark #view-ports .cruise-log-map-card .ports-map-legend .pml-item,
.dark-mode #view-ports .cruise-log-map-card .ports-map-legend .pml-item{
  background:rgba(15,23,42,.72);
}

/* =========================================================
   MyVoyage Sea — Cruise History / Analytics
   2026-08-22 v106
   Balanced responsive dashboard, mobile-first, light/dark.
   Presentation-only: preserves Cruise Log analytics logic.
   ========================================================= */

/* ports-tab-summary is a <small>; make generated analytics own the full card width. */
#view-ports #ports-tab-summary{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin-top:4px;
}

#view-ports #ports-tab-summary > .status-dashboard{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box;
  margin-top:16px;
  padding:18px !important;
  border:1px solid color-mix(in srgb, var(--surface-border, #d8e0ea) 72%, #65d7ff 28%);
  border-radius:24px;
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,.08), transparent 34%),
    radial-gradient(circle at 100% 0, rgba(8,120,189,.06), transparent 34%),
    color-mix(in srgb, var(--surface, #fff) 97%, #eefaff 3%);
  box-shadow:0 14px 34px rgba(15,23,42,.055);
  gap:14px !important;
}

#view-ports #ports-tab-summary .status-toolbar{
  margin:0 !important;
  min-height:40px;
}
#view-ports #ports-tab-summary .status-toolbar-btn{
  min-height:40px;
  padding:9px 14px !important;
  border-radius:14px !important;
  border:1px solid color-mix(in srgb, var(--surface-border, #d8e0ea) 78%, #69d8ff 22%) !important;
  background:color-mix(in srgb, var(--surface, #fff) 96%, #e8f8ff 4%) !important;
  color:var(--text, #0f172a) !important;
  font-weight:800 !important;
}

/* Core KPIs: equal cards across the usable desktop width. */
#view-ports #ports-tab-summary .status-row-kpis{
  display:grid !important;
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
  gap:14px !important;
  width:100% !important;
}

#view-ports #ports-tab-summary .ports-stat,
#view-ports #ports-tab-summary .ships-panel{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  border-radius:20px !important;
  border:1px solid color-mix(in srgb, var(--surface-border, #d8e0ea) 78%, #9be6ff 22%) !important;
  background:
    radial-gradient(circle at 100% 0, rgba(56,189,248,.07), transparent 35%),
    color-mix(in srgb, var(--surface, #fff) 98%, #edfaff 2%) !important;
  box-shadow:0 8px 24px rgba(15,23,42,.05) !important;
}

#view-ports #ports-tab-summary .ports-stat-kpi{
  min-height:142px !important;
  padding:17px !important;
}
#view-ports #ports-tab-summary .ports-stat-icon{
  width:38px !important;
  height:38px !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(145deg, rgba(56,189,248,.14), rgba(7,91,169,.08)) !important;
  border:1px solid rgba(56,189,248,.16);
}
#view-ports #ports-tab-summary .ports-stat-kpi-value{
  font-size:2rem !important;
  line-height:1 !important;
  letter-spacing:-.035em;
}
#view-ports #ports-tab-summary .ports-stat-kpi-label{
  font-size:.78rem !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;
  font-weight:850 !important;
}
#view-ports #ports-tab-summary .ports-stat-sub{
  font-size:.76rem !important;
  line-height:1.35 !important;
}

/* Story row: Most Visited + Top 5 should feel like one analytics band. */
#view-ports #ports-tab-summary .status-row-story{
  display:grid !important;
  grid-template-columns:minmax(240px,.8fr) minmax(0,2.2fr) !important;
  gap:14px !important;
  width:100% !important;
  align-items:stretch !important;
}
#view-ports #ports-tab-summary .status-row-story .ports-stat-most-visited-card,
#view-ports #ports-tab-summary .status-row-story .ports-stat-top5-card--wide{
  grid-column:auto !important;
  grid-row:auto !important;
  min-height:176px !important;
  margin:0 !important;
  padding:17px !important;
}
#view-ports #ports-tab-summary .ports-stat-kpi-text{
  max-width:none !important;
  font-size:1.48rem !important;
  line-height:1.08 !important;
}
#view-ports #ports-tab-summary .ports-top5-list{
  gap:9px !important;
}
#view-ports #ports-tab-summary .ports-top5-item{
  grid-template-columns:30px minmax(150px,.8fr) minmax(160px,1.4fr) 30px !important;
  gap:10px !important;
  align-items:center;
}
#view-ports #ports-tab-summary .ports-top5-bar{
  height:9px !important;
}

/* Sailing timeline should span the full analytics width. */
#view-ports #ports-tab-summary .status-row-years-only{
  display:grid !important;
  grid-template-columns:1fr !important;
  width:100% !important;
  gap:14px !important;
}
#view-ports #ports-tab-summary .status-row-years-only .ports-stat-sailing-timeline-card--full{
  grid-column:1 / -1 !important;
  width:auto !important;
  margin:0 !important;
  padding:17px !important;
}
#view-ports #ports-tab-summary .years-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
#view-ports #ports-tab-summary .ships-years-list{
  gap:10px !important;
}
#view-ports #ports-tab-summary .ships-year-item{
  grid-template-columns:58px minmax(0,1fr) 34px !important;
  gap:12px !important;
}
#view-ports #ports-tab-summary .ships-year-bar{
  height:9px !important;
}

/* Ships Sailed: use the desktop width instead of stacking everything in a narrow column. */
#view-ports #ports-tab-summary .status-row-ships{
  display:grid !important;
  grid-template-columns:1fr !important;
  width:100% !important;
  margin:0 !important;
}
#view-ports #ports-tab-summary .ships-panel{
  padding:18px !important;
  position:relative !important;
  top:auto !important;
}
#view-ports #ports-tab-summary .ships-panel-header{
  padding-bottom:12px;
  margin-bottom:14px !important;
  border-bottom:1px solid color-mix(in srgb, var(--surface-border, #d8e0ea) 75%, transparent 25%);
}
#view-ports #ports-tab-summary .ships-panel-title{
  font-size:.86rem !important;
  font-weight:900 !important;
  letter-spacing:.13em !important;
  color:var(--text, #0f172a) !important;
}

@media (min-width:900px){
  #view-ports #ports-tab-summary #ships-sailed-panel{
    display:grid;
    grid-template-columns:minmax(280px,.82fr) minmax(420px,1.55fr);
    grid-template-rows:auto 1fr;
    column-gap:22px;
    row-gap:14px;
    align-items:start;
  }
  #view-ports #ports-tab-summary #ships-sailed-panel.is-collapsed{
    display:none !important;
  }
  #view-ports #ports-tab-summary .ships-panel-summary-strip{
    grid-column:1;
    grid-row:1;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  #view-ports #ports-tab-summary .ships-mini-stat{
    padding:12px 10px !important;
    min-height:112px;
  }
  #view-ports #ports-tab-summary .ships-mini-stat-value{
    font-size:1.55rem !important;
  }
  #view-ports #ports-tab-summary .ships-mini-stat-value--most,
  #view-ports #ports-tab-summary .ships-mini-stat-value--text{
    font-size:.92rem !important;
    white-space:normal !important;
  }
  #view-ports #ports-tab-summary .ships-panel-most--compact{
    grid-column:1;
    grid-row:2;
    margin-top:0 !important;
    padding-top:14px !important;
  }
  #view-ports #ports-tab-summary .ships-panel-list-wrap--leaderboard{
    grid-column:2;
    grid-row:1 / span 2;
    margin-top:0 !important;
    padding:0 0 0 22px !important;
    border-top:0 !important;
    border-left:1px solid color-mix(in srgb, var(--surface-border, #d8e0ea) 75%, transparent 25%) !important;
  }
  #view-ports #ports-tab-summary .ship-row--leaderboard{
    min-height:48px;
  }
  #view-ports #ports-tab-summary .ship-bar{
    height:8px !important;
  }
}

/* Tablet: retain a compact but balanced dashboard. */
@media (min-width:641px) and (max-width:899px){
  #view-ports #ports-tab-summary .status-row-story{
    grid-template-columns:minmax(210px,.9fr) minmax(0,1.7fr) !important;
  }
  #view-ports #ports-tab-summary .ships-panel-summary-strip{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Mobile: one-column flow, touch-friendly, no clipping. */
@media (max-width:640px){
  #view-ports #ports-tab-summary > .status-dashboard{
    margin-top:12px;
    padding:12px !important;
    border-radius:20px;
    gap:10px !important;
  }
  #view-ports #ports-tab-summary .status-toolbar{
    justify-content:stretch !important;
  }
  #view-ports #ports-tab-summary .status-toolbar-btn{
    width:100%;
    min-height:48px;
  }
  #view-ports #ports-tab-summary .status-row-kpis,
  #view-ports #ports-tab-summary .status-row-story,
  #view-ports #ports-tab-summary .status-row-years-only,
  #view-ports #ports-tab-summary .status-row-ships{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }
  #view-ports #ports-tab-summary .ports-stat-kpi,
  #view-ports #ports-tab-summary .status-row-story .ports-stat-most-visited-card,
  #view-ports #ports-tab-summary .status-row-story .ports-stat-top5-card--wide{
    min-height:auto !important;
    padding:14px !important;
  }
  #view-ports #ports-tab-summary .ports-top5-item{
    grid-template-columns:26px minmax(0,1fr) 72px 26px !important;
    gap:7px !important;
  }
  #view-ports #ports-tab-summary .ports-top5-name{
    font-size:.82rem !important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #view-ports #ports-tab-summary .ships-panel{
    padding:14px !important;
  }
  #view-ports #ports-tab-summary .ships-panel-header{
    align-items:flex-start !important;
  }
  #view-ports #ports-tab-summary #ships-sailed-panel{
    display:block;
  }
  #view-ports #ports-tab-summary #ships-sailed-panel.is-collapsed{
    display:none !important;
  }
  #view-ports #ports-tab-summary .ships-panel-summary-strip{
    grid-template-columns:1fr 1fr !important;
  }
  #view-ports #ports-tab-summary .ships-mini-stat:last-child{
    grid-column:1 / -1;
  }
  #view-ports #ports-tab-summary .ships-panel-list-wrap--leaderboard{
    padding-top:14px !important;
  }
}

/* Explicit dark/night mode tuning. */
html[data-theme="dark"] #view-ports #ports-tab-summary > .status-dashboard,
body.dark #view-ports #ports-tab-summary > .status-dashboard,
.dark-mode #view-ports #ports-tab-summary > .status-dashboard{
  background:
    radial-gradient(circle at 0 0, rgba(14,165,233,.12), transparent 36%),
    radial-gradient(circle at 100% 0, rgba(7,91,169,.10), transparent 34%),
    color-mix(in srgb, var(--surface, #111827) 96%, #082f49 4%);
  border-color:color-mix(in srgb, var(--surface-border, #334155) 72%, #1daee8 28%);
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
html[data-theme="dark"] #view-ports #ports-tab-summary .ports-stat,
html[data-theme="dark"] #view-ports #ports-tab-summary .ships-panel,
body.dark #view-ports #ports-tab-summary .ports-stat,
body.dark #view-ports #ports-tab-summary .ships-panel,
.dark-mode #view-ports #ports-tab-summary .ports-stat,
.dark-mode #view-ports #ports-tab-summary .ships-panel{
  background:
    radial-gradient(circle at 100% 0, rgba(14,165,233,.08), transparent 38%),
    color-mix(in srgb, var(--surface, #111827) 97%, #0c4a6e 3%) !important;
  border-color:color-mix(in srgb, var(--surface-border, #334155) 78%, #1daee8 22%) !important;
  box-shadow:0 10px 28px rgba(0,0,0,.18) !important;
}

/* ==========================================================
   MyVoyage Sea — Cruise Timeline + Port Explorer + Ships Sailed
   v107 · presentation-only overrides
   ========================================================== */

/* ---------- Cruise Timeline ---------- */
.timeline-modal-dialog{
  width:min(1180px, calc(100% - 32px)) !important;
  height:min(92vh, 980px) !important;
  margin:4vh auto !important;
  border-radius:26px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,.09), transparent 34%),
    radial-gradient(circle at 100% 0, rgba(7,91,169,.07), transparent 32%),
    var(--surface, #fff) !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 75%, #7ddcff 25%) !important;
  box-shadow:0 28px 80px rgba(15,23,42,.22) !important;
}
.timeline-modal-header{
  padding:20px 24px !important;
  background:color-mix(in srgb, var(--surface,#fff) 94%, #effaff 6%) !important;
  border-bottom:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 76%, #8cdfff 24%) !important;
}
.timeline-modal-kicker{
  color:#159fd2 !important;
  font-weight:900 !important;
  letter-spacing:.16em !important;
  font-size:.72rem !important;
}
.timeline-modal-header h2{
  margin:4px 0 0 !important;
  font-size:1.55rem !important;
  letter-spacing:-.025em !important;
  color:var(--text,#0f172a) !important;
}
.timeline-modal-close{
  min-height:44px !important;
  padding:10px 18px !important;
  border-radius:16px !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 78%, #7ddcff 22%) !important;
  background:var(--surface,#fff) !important;
  color:var(--text,#0f172a) !important;
  box-shadow:0 4px 14px rgba(15,23,42,.05) !important;
}
.timeline-modal-body{
  padding:22px 24px 28px !important;
}
.timeline-year-group{
  margin:0 0 26px !important;
}
.timeline-year-label{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  margin:0 0 12px !important;
  font-size:1.2rem !important;
  font-weight:900 !important;
  color:var(--text,#0f172a) !important;
}
.timeline-year-label::before{
  content:"";
  width:9px;
  height:9px;
  border-radius:999px;
  background:linear-gradient(135deg,#22c1f1,#075ba9);
  box-shadow:0 0 0 5px rgba(56,189,248,.10);
  flex:none;
}
.timeline-year-items{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}
.timeline-trip-card{
  margin:0 !important;
  border-radius:19px !important;
  overflow:hidden !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 80%, #8edfff 20%) !important;
  background:color-mix(in srgb, var(--surface,#fff) 98%, #edfaff 2%) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.05) !important;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.timeline-trip-card[open]{
  grid-column:1 / -1;
  border-color:rgba(56,189,248,.48) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.08) !important;
}
.timeline-trip-summary{
  min-height:92px !important;
  padding:16px 18px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  cursor:pointer !important;
  list-style:none !important;
}
.timeline-trip-summary::-webkit-details-marker{display:none}
.timeline-trip-main{min-width:0 !important}
.timeline-trip-title{
  font-size:1rem !important;
  line-height:1.24 !important;
  font-weight:900 !important;
  color:var(--text,#0f172a) !important;
}
.timeline-trip-meta{
  margin-top:6px !important;
  color:var(--muted,#64748b) !important;
  font-size:.9rem !important;
}
.timeline-trip-chevron{
  flex:none !important;
  min-width:70px !important;
  text-align:center !important;
  padding:9px 12px !important;
  border-radius:13px !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 78%, #7ddcff 22%) !important;
  background:color-mix(in srgb, var(--surface,#fff) 94%, #eaf9ff 6%) !important;
  font-weight:850 !important;
  font-size:.82rem !important;
  color:var(--text,#0f172a) !important;
}
.timeline-trip-card[open] .timeline-trip-chevron{font-size:0 !important}
.timeline-trip-card[open] .timeline-trip-chevron::after{content:"Close";font-size:.82rem}
.timeline-trip-details{
  padding:0 18px 18px !important;
  border-top:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 72%, transparent 28%) !important;
}
.timeline-trip-route{margin-top:16px !important}
.timeline-trip-stats{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:9px !important;
  margin:14px 0 10px !important;
}
.timeline-trip-stats > span{
  padding:10px 11px !important;
  border-radius:13px !important;
  text-align:center !important;
  background:color-mix(in srgb, var(--surface,#fff) 94%, #eaf9ff 6%) !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 84%, #8edfff 16%) !important;
  font-size:.78rem !important;
  font-weight:750 !important;
}
.timeline-trip-newports{
  padding:11px 12px !important;
  border-radius:13px !important;
  background:rgba(56,189,248,.08) !important;
  color:var(--muted,#64748b) !important;
}
.timeline-trip-actions{display:flex !important;justify-content:flex-end !important;margin-top:12px !important}
.timeline-trip-actions .btn{min-height:42px !important;border-radius:13px !important}
.timeline-modal-footer{
  background:color-mix(in srgb, var(--surface,#fff) 96%, #effaff 4%) !important;
  border-top:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 80%, #8edfff 20%) !important;
}

/* ---------- Port Explorer ---------- */
#view-ports .cruise-log-v2-shell{
  border-radius:24px !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 76%, #8edfff 24%) !important;
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,.08), transparent 32%),
    radial-gradient(circle at 100% 0, rgba(7,91,169,.06), transparent 30%),
    color-mix(in srgb, var(--surface,#fff) 98%, #f0fbff 2%) !important;
  box-shadow:0 12px 30px rgba(15,23,42,.05) !important;
  padding:18px !important;
}
#view-ports .cruise-log-v2-head{
  padding:2px 2px 16px !important;
  border-bottom:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 76%, transparent 24%) !important;
}
#view-ports .cruise-log-v2-kicker{
  color:#159fd2 !important;
  font-weight:900 !important;
  letter-spacing:.15em !important;
}
#view-ports .cruise-log-v2-title{
  font-size:1.35rem !important;
  font-weight:900 !important;
  letter-spacing:-.02em !important;
}
#view-ports .cruise-log-v2-sub{color:var(--muted,#64748b) !important}
#view-ports .ports-quick-filter{
  padding:4px !important;
  border-radius:15px !important;
  background:color-mix(in srgb, var(--surface,#fff) 92%, #edf7fb 8%) !important;
  border:1px solid var(--surface-border,#d8e0ea) !important;
}
#view-ports .ports-filter-btn,
#view-ports .cruise-log-v2-toggle{
  min-height:40px !important;
  border-radius:11px !important;
  font-weight:800 !important;
}
#view-ports .ports-filter-btn.is-active{
  background:var(--surface,#fff) !important;
  color:var(--text,#0f172a) !important;
  box-shadow:0 4px 12px rgba(15,23,42,.08) !important;
}
#view-ports .ports-explorer-list.is-open{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
  padding-top:16px !important;
  overflow:visible !important;
}
#view-ports .port-stat-row{
  min-width:0 !important;
  width:auto !important;
  margin:0 !important;
  border-radius:18px !important;
  overflow:hidden !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 82%, #8edfff 18%) !important;
  background:var(--surface,#fff) !important;
  box-shadow:0 7px 18px rgba(15,23,42,.045) !important;
}
#view-ports .port-stat-row[open]{
  grid-column:1 / -1 !important;
  border-color:rgba(56,189,248,.46) !important;
  box-shadow:0 14px 30px rgba(15,23,42,.08) !important;
}
#view-ports .port-stat-summary{
  min-height:118px !important;
  padding:15px 16px !important;
  cursor:pointer !important;
}
#view-ports .port-stat-name-line{
  align-items:center !important;
  gap:10px !important;
}
#view-ports .port-stat-name{
  font-size:1rem !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  color:var(--text,#0f172a) !important;
}
#view-ports .port-favorite-btn{
  min-height:34px !important;
  padding:6px 10px !important;
  border-radius:11px !important;
  background:color-mix(in srgb, var(--surface,#fff) 95%, #fff8df 5%) !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 82%, #f7cf73 18%) !important;
}
#view-ports .port-stat-sub-main{
  margin-top:9px !important;
  font-size:.82rem !important;
  color:var(--muted,#64748b) !important;
}
#view-ports .port-stat-timeline--compact{
  margin-top:5px !important;
  font-size:.76rem !important;
  color:var(--muted,#64748b) !important;
}
#view-ports .port-journal-grid{
  padding:0 15px 14px !important;
  gap:10px !important;
}
#view-ports .port-journal-card{
  border-radius:15px !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 82%, #8edfff 18%) !important;
  background:color-mix(in srgb, var(--surface,#fff) 97%, #edfaff 3%) !important;
}
#view-ports .port-stat-trips{padding:0 15px 15px !important}

/* ---------- Ships Sailed ---------- */
#view-ports #ports-tab-summary .ships-panel{
  overflow:hidden !important;
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,.08), transparent 34%),
    radial-gradient(circle at 100% 0, rgba(7,91,169,.06), transparent 32%),
    var(--surface,#fff) !important;
}
#view-ports #ports-tab-summary .ships-panel-header{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
}
#view-ports #ports-tab-summary .ships-panel-title{
  text-transform:uppercase !important;
}
#view-ports #ports-tab-summary .ships-panel-actions{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
#view-ports #ports-tab-summary .ships-panel-badge{
  border-radius:999px !important;
  padding:6px 10px !important;
  background:rgba(56,189,248,.09) !important;
  border:1px solid rgba(56,189,248,.20) !important;
  color:#167fa8 !important;
  font-weight:850 !important;
}
#view-ports #ports-tab-summary .ships-panel-toggle,
#view-ports #ports-tab-summary .ships-panel-link{
  min-height:36px !important;
  border-radius:11px !important;
  background:var(--surface,#fff) !important;
  border:1px solid var(--surface-border,#d8e0ea) !important;
  font-weight:800 !important;
}
#view-ports #ports-tab-summary .ships-panel-summary-strip{
  gap:10px !important;
}
#view-ports #ports-tab-summary .ships-mini-stat{
  border-radius:16px !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d8e0ea) 82%, #8edfff 18%) !important;
  background:color-mix(in srgb, var(--surface,#fff) 97%, #edfaff 3%) !important;
  box-shadow:none !important;
}
#view-ports #ports-tab-summary .ships-panel-most--compact{
  border-radius:15px !important;
  padding:12px 14px !important;
  background:rgba(7,91,169,.055) !important;
  border:1px solid rgba(7,91,169,.13) !important;
}
#view-ports #ports-tab-summary .ships-panel-list-wrap--leaderboard{
  border-radius:16px !important;
}
#view-ports #ports-tab-summary .ship-row--leaderboard{
  padding:9px 8px !important;
  border-radius:12px !important;
}
#view-ports #ports-tab-summary .ship-row--leaderboard:hover{
  background:rgba(56,189,248,.06) !important;
}

/* ---------- Responsive MyVoyage Sea behavior ---------- */
@media (max-width:820px){
  .timeline-modal-dialog{
    width:100% !important;
    height:100% !important;
    margin:0 !important;
    border-radius:0 !important;
    border-left:0 !important;
    border-right:0 !important;
  }
  .timeline-year-items{grid-template-columns:1fr !important}
  .timeline-trip-card[open]{grid-column:auto !important}
  .timeline-trip-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #view-ports .ports-explorer-list.is-open{grid-template-columns:1fr !important}
  #view-ports .port-stat-row[open]{grid-column:auto !important}
}
@media (max-width:640px){
  .timeline-modal-header{padding:calc(14px + env(safe-area-inset-top,0px)) 14px 12px !important}
  .timeline-modal-header h2{font-size:1.22rem !important}
  .timeline-modal-body{padding:14px 14px 92px !important}
  .timeline-trip-summary{min-height:88px !important;padding:14px !important}
  .timeline-trip-title{font-size:.94rem !important}
  .timeline-trip-meta{font-size:.82rem !important}
  .timeline-trip-chevron{min-width:62px !important;padding:8px 9px !important}
  .timeline-trip-stats{grid-template-columns:1fr 1fr !important}
  .timeline-modal-footer{padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)) !important}
  .timeline-modal-close-bottom{display:flex !important;width:100% !important;min-height:50px !important}

  #view-ports .cruise-log-v2-shell{padding:13px !important;border-radius:20px !important}
  #view-ports .cruise-log-v2-head{display:block !important}
  #view-ports .cruise-log-v2-actions{margin-top:12px !important;display:grid !important;gap:9px !important}
  #view-ports .ports-quick-filter{display:grid !important;grid-template-columns:repeat(3,1fr) !important}
  #view-ports .cruise-log-v2-toggle{width:100% !important;min-height:46px !important}
  #view-ports .port-stat-summary{min-height:112px !important;padding:14px !important}
  #view-ports .port-stat-name-line{align-items:flex-start !important}
  #view-ports .port-stat-name{font-size:.96rem !important}
  #view-ports .port-favorite-btn{flex:none !important}
}

/* ---------- Dark / night mode ---------- */
html[data-theme="dark"] .timeline-modal-dialog,
body.dark .timeline-modal-dialog,
.dark-mode .timeline-modal-dialog,
html[data-theme="dark"] #view-ports .cruise-log-v2-shell,
body.dark #view-ports .cruise-log-v2-shell,
.dark-mode #view-ports .cruise-log-v2-shell{
  background:
    radial-gradient(circle at 0 0, rgba(14,165,233,.12), transparent 34%),
    radial-gradient(circle at 100% 0, rgba(7,91,169,.10), transparent 30%),
    var(--surface,#111827) !important;
  border-color:color-mix(in srgb, var(--surface-border,#334155) 74%, #1daee8 26%) !important;
}
html[data-theme="dark"] .timeline-trip-card,
body.dark .timeline-trip-card,
.dark-mode .timeline-trip-card,
html[data-theme="dark"] #view-ports .port-stat-row,
body.dark #view-ports .port-stat-row,
.dark-mode #view-ports .port-stat-row,
html[data-theme="dark"] #view-ports #ports-tab-summary .ships-mini-stat,
body.dark #view-ports #ports-tab-summary .ships-mini-stat,
.dark-mode #view-ports #ports-tab-summary .ships-mini-stat{
  background:color-mix(in srgb, var(--surface,#111827) 96%, #0c4a6e 4%) !important;
  border-color:color-mix(in srgb, var(--surface-border,#334155) 80%, #1daee8 20%) !important;
}
html[data-theme="dark"] .timeline-modal-header,
body.dark .timeline-modal-header,
.dark-mode .timeline-modal-header,
html[data-theme="dark"] .timeline-modal-footer,
body.dark .timeline-modal-footer,
.dark-mode .timeline-modal-footer{
  background:color-mix(in srgb, var(--surface,#111827) 96%, #082f49 4%) !important;
}

/* =========================================================
   MyVoyage Sea — Cruise Log detail + mobile/night pass v108
   Timeline details, expanded Port Explorer, port modal, map popup
   ========================================================= */

/* ---------- Expanded Port Explorer details ---------- */
#view-ports .port-stat-row[open]{
  background:
    radial-gradient(circle at 0 0, rgba(14,165,233,.08), transparent 34%),
    radial-gradient(circle at 100% 0, rgba(7,91,169,.06), transparent 30%),
    var(--surface,#fff) !important;
  border-color:color-mix(in srgb, var(--surface-border,#d9e2ec) 68%, #1daee8 32%) !important;
  box-shadow:0 16px 38px rgba(15,23,42,.08) !important;
}
#view-ports .port-stat-row[open] .port-stat-summary{
  border-bottom:1px solid color-mix(in srgb, var(--surface-border,#d9e2ec) 78%, #1daee8 22%) !important;
  border-radius:18px 18px 0 0 !important;
  background:linear-gradient(135deg, rgba(14,165,233,.07), rgba(7,91,169,.045)) !important;
}
#view-ports .port-journal-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  padding:16px 16px 4px !important;
}
#view-ports .port-journal-card{
  border:1px solid color-mix(in srgb, var(--surface-border,#d9e2ec) 82%, #1daee8 18%) !important;
  background:color-mix(in srgb, var(--surface,#fff) 97%, #e0f2fe 3%) !important;
  border-radius:17px !important;
  padding:14px !important;
  box-shadow:0 8px 20px rgba(15,23,42,.045) !important;
}
#view-ports .port-journal-title{
  font-size:.72rem !important;
  font-weight:900 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:var(--muted,#64748b) !important;
  margin-bottom:9px !important;
}
#view-ports .port-journal-list{
  margin:0 !important;
  padding-left:18px !important;
  color:var(--text,#0f172a) !important;
  line-height:1.5 !important;
}
#view-ports .port-stat-trips{
  display:grid !important;
  gap:10px !important;
  padding:12px 16px 16px !important;
}
#view-ports .port-trip-item{
  display:flex !important;
  align-items:flex-start !important;
  gap:10px !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d9e2ec) 84%, #1daee8 16%) !important;
  background:var(--surface,#fff) !important;
  border-radius:17px !important;
  padding:13px 14px !important;
  box-shadow:0 7px 18px rgba(15,23,42,.04) !important;
}
#view-ports .port-trip-main{min-width:0 !important;flex:1 1 auto !important}
#view-ports .trip-line{font-weight:850 !important;color:var(--text,#0f172a) !important;line-height:1.35 !important}
#view-ports .port-trip-excursions{
  margin-top:10px !important;
  border-radius:14px !important;
  background:color-mix(in srgb, var(--surface,#fff) 95%, #e0f2fe 5%) !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d9e2ec) 88%, #38bdf8 12%) !important;
  padding:9px 10px !important;
}
#view-ports .port-trip-actions-wrap{margin-top:11px !important}
#view-ports .port-trip-actions{display:flex !important;gap:8px !important;flex-wrap:wrap !important}
#view-ports .port-trip-actions .btn{
  min-height:42px !important;
  border-radius:13px !important;
  padding:9px 12px !important;
}

/* ---------- Port detail modal ---------- */
.port-trips-modal-overlay{
  background:rgba(15,23,42,.58) !important;
  backdrop-filter:blur(12px) saturate(115%) !important;
  -webkit-backdrop-filter:blur(12px) saturate(115%) !important;
}
.port-trips-modal-v2{
  width:min(960px,94vw) !important;
  max-height:min(88vh,900px) !important;
  padding:0 !important;
  overflow:auto !important;
  border-radius:26px !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d9e2ec) 70%, #1daee8 30%) !important;
  background:
    radial-gradient(circle at 0 0, rgba(14,165,233,.09), transparent 34%),
    radial-gradient(circle at 100% 0, rgba(7,91,169,.07), transparent 32%),
    var(--surface,#fff) !important;
  box-shadow:0 28px 80px rgba(15,23,42,.28) !important;
}
.port-trips-modal-header-v2{
  position:sticky !important;
  top:0 !important;
  z-index:4 !important;
  display:flex !important;
  align-items:center !important;
  gap:16px !important;
  padding:20px 22px 18px !important;
  margin:0 !important;
  border-bottom:1px solid color-mix(in srgb, var(--surface-border,#d9e2ec) 74%, #1daee8 26%) !important;
  background:color-mix(in srgb, var(--surface,#fff) 93%, transparent) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}
.port-detail-hero{min-width:0 !important;flex:1 1 auto !important}
.port-trips-modal-kicker{
  color:#159ad1 !important;
  font-weight:900 !important;
  letter-spacing:.14em !important;
}
.port-detail-hero h3{
  margin:2px 0 5px !important;
  font-size:1.5rem !important;
  line-height:1.12 !important;
  color:var(--text,#0f172a) !important;
}
.port-detail-meta{font-size:.9rem !important;color:var(--muted,#64748b) !important}
.port-trips-modal-header-v2 [data-close-port-trips]{
  flex:0 0 auto !important;
  min-width:48px !important;
  min-height:48px !important;
  border-radius:16px !important;
  font-weight:850 !important;
}
.port-trips-modal-v2 .port-detail-summary-grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
  padding:18px 22px 0 !important;
  margin:0 !important;
}
.port-trips-modal-v2 .port-detail-stat{
  min-height:92px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  border-radius:18px !important;
  padding:14px 15px !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d9e2ec) 78%, #1daee8 22%) !important;
  background:color-mix(in srgb, var(--surface,#fff) 97%, #e0f2fe 3%) !important;
}
.port-trips-modal-v2 .port-detail-stat-label{font-weight:900 !important;letter-spacing:.12em !important}
.port-trips-modal-v2 .port-detail-stat strong{font-size:1rem !important;color:var(--text,#0f172a) !important}
.port-trips-modal-v2 .port-detail-section{margin:0 !important;padding:18px 22px 0 !important}
.port-trips-modal-v2 .port-detail-section:last-child{padding-bottom:22px !important}
.port-trips-modal-v2 .port-detail-section-title{
  margin-bottom:10px !important;
  color:var(--text,#0f172a) !important;
  font-size:.8rem !important;
  font-weight:950 !important;
  letter-spacing:.14em !important;
}
.port-trips-modal-v2 .port-detail-ship-chip{
  min-height:38px !important;
  border-radius:999px !important;
  padding:8px 12px !important;
  border-color:color-mix(in srgb, var(--surface-border,#d9e2ec) 76%, #38bdf8 24%) !important;
  background:color-mix(in srgb, var(--surface,#fff) 96%, #e0f2fe 4%) !important;
}
.port-trips-modal-v2 .port-trips-modal-body{gap:12px !important}
.port-trips-modal-v2 .port-trip-mini-card{
  border-radius:19px !important;
  border-color:color-mix(in srgb, var(--surface-border,#d9e2ec) 78%, #1daee8 22%) !important;
  background:var(--surface,#fff) !important;
  padding:15px !important;
  box-shadow:0 9px 22px rgba(15,23,42,.05) !important;
}
.port-trips-modal-v2 .port-trip-mini-title{font-size:1rem !important;color:var(--text,#0f172a) !important}
.port-trips-modal-v2 .port-trip-mini-actions .btn{min-height:44px !important;border-radius:13px !important}
.port-trips-modal-v2 .route-preview-scroll{
  border-color:color-mix(in srgb, var(--surface-border,#d9e2ec) 82%, #38bdf8 18%) !important;
  background:color-mix(in srgb, var(--surface,#fff) 96%, #e0f2fe 4%) !important;
}

/* ---------- Leaflet port popup ---------- */
#view-ports .leaflet-popup-content-wrapper{
  border-radius:19px !important;
  border:1px solid color-mix(in srgb, var(--surface-border,#d9e2ec) 72%, #1daee8 28%) !important;
  background:var(--surface,#fff) !important;
  color:var(--text,#0f172a) !important;
  box-shadow:0 18px 44px rgba(15,23,42,.18) !important;
}
#view-ports .leaflet-popup-tip{background:var(--surface,#fff) !important}
#view-ports .leaflet-popup-content{margin:0 !important;min-width:220px !important}
#view-ports .port-map-popup{padding:14px !important}
#view-ports .port-map-popup .pmp-title{font-size:1rem !important;color:var(--text,#0f172a) !important;margin-bottom:4px !important}
#view-ports .port-map-popup .pmp-meta{font-size:.8rem !important;margin-bottom:7px !important}
#view-ports .port-map-popup .pmp-timeline{font-size:.76rem !important;line-height:1.45 !important;margin-bottom:10px !important}
#view-ports .port-map-popup .pmp-ship-chip{
  min-height:30px !important;
  padding:5px 8px !important;
  background:color-mix(in srgb, var(--surface,#fff) 95%, #e0f2fe 5%) !important;
  border-color:color-mix(in srgb, var(--surface-border,#d9e2ec) 80%, #38bdf8 20%) !important;
}
#view-ports .port-map-popup .pmp-view{
  width:100% !important;
  min-height:40px !important;
  margin-top:3px !important;
  border-radius:12px !important;
  font-weight:850 !important;
}
#view-ports .leaflet-popup-close-button{
  width:34px !important;
  height:34px !important;
  line-height:32px !important;
  border-radius:11px !important;
  font-size:20px !important;
  color:var(--muted,#64748b) !important;
}

/* ---------- Timeline detail polish ---------- */
.timeline-trip-details{
  padding:0 16px 16px !important;
  color:var(--text,#0f172a) !important;
}
.timeline-trip-card[open] .timeline-trip-summary{
  background:linear-gradient(135deg, rgba(14,165,233,.07), rgba(7,91,169,.05)) !important;
  border-bottom:1px solid color-mix(in srgb, var(--surface-border,#d9e2ec) 80%, #1daee8 20%) !important;
}
.timeline-trip-route .route-preview-scroll{
  border-radius:15px !important;
  border-color:color-mix(in srgb, var(--surface-border,#d9e2ec) 82%, #38bdf8 18%) !important;
  background:color-mix(in srgb, var(--surface,#fff) 96%, #e0f2fe 4%) !important;
}
.timeline-trip-stats > span{
  min-height:58px !important;
  border-radius:14px !important;
  background:color-mix(in srgb, var(--surface,#fff) 96%, #e0f2fe 4%) !important;
}
.timeline-trip-newports{
  margin-top:10px !important;
  padding:10px 12px !important;
  border-radius:13px !important;
  color:var(--muted,#64748b) !important;
  background:color-mix(in srgb, var(--surface,#fff) 95%, #f1f5f9 5%) !important;
}

/* ---------- Phone / touch pass ---------- */
@media (max-width:640px){
  #view-ports .cruise-log-map-card .ports-map-wrap{overflow:hidden !important}
  #view-ports .cruise-log-map-card #ports-map{min-height:330px !important;height:46vh !important;max-height:430px !important}
  #view-ports .cruise-log-map-card .leaflet-control-zoom a{width:40px !important;height:40px !important;line-height:40px !important;font-size:20px !important}
  #view-ports .cruise-log-map-card .ports-map-legend{overflow-x:auto !important;flex-wrap:nowrap !important;-webkit-overflow-scrolling:touch !important}
  #view-ports .cruise-log-map-card .ports-map-legend .pml-item{white-space:nowrap !important;min-height:34px !important}

  #view-ports .ports-quick-filter button,
  #view-ports .ports-quick-filter .btn{min-height:44px !important;padding:9px 8px !important}
  #view-ports .port-stat-summary{min-height:118px !important}
  #view-ports .port-favorite-btn{min-height:40px !important;padding:8px 10px !important}
  #view-ports .port-journal-grid{grid-template-columns:1fr !important;padding:12px 12px 2px !important;gap:9px !important}
  #view-ports .port-stat-trips{padding:10px 12px 13px !important}
  #view-ports .port-trip-item{padding:12px !important;border-radius:15px !important}
  #view-ports .port-trip-actions{display:grid !important;grid-template-columns:1fr !important;width:100% !important}
  #view-ports .port-trip-actions .btn{width:100% !important;min-height:46px !important}

  .port-trips-modal-overlay{align-items:stretch !important;padding:0 !important}
  .port-trips-modal-v2{
    width:100% !important;
    max-width:none !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    border:0 !important;
    padding:0 !important;
    overscroll-behavior:contain !important;
  }
  .port-trips-modal-v2::before{display:none !important}
  .port-trips-modal-header-v2{
    padding:calc(14px + env(safe-area-inset-top,0px)) 14px 12px !important;
    min-height:84px !important;
  }
  .port-detail-hero h3{font-size:1.18rem !important;max-width:none !important;word-break:break-word !important}
  .port-detail-meta{font-size:.8rem !important;line-height:1.35 !important}
  .port-trips-modal-header-v2 [data-close-port-trips]{
    min-width:46px !important;width:46px !important;height:46px !important;padding:0 !important;font-size:0 !important;border-radius:15px !important;
  }
  .port-trips-modal-header-v2 [data-close-port-trips]::after{content:"×";font-size:1.7rem;line-height:1 !important}
  .port-trips-modal-v2 .port-detail-summary-grid{grid-template-columns:1fr 1fr !important;padding:14px 14px 0 !important;gap:9px !important}
  .port-trips-modal-v2 .port-detail-stat{min-height:82px !important;padding:12px !important;border-radius:15px !important}
  .port-trips-modal-v2 .port-detail-section{padding:15px 14px 0 !important}
  .port-trips-modal-v2 .port-detail-section:last-child{padding-bottom:18px !important}

  /* Port detail is a full-screen mobile sheet. Hide the app tab bar while it is open
     so the trip action buttons remain visible and tappable. */
  body.port-trips-modal-open .mobile-tabbar,
  body.port-trips-modal-open .mobile-tabs,
  body.port-trips-modal-open .bottom-nav{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .port-trips-modal-v2 .port-trip-mini-card{padding:12px !important;border-radius:16px !important}
  .port-trips-modal-v2 .port-trip-mini-actions{display:grid !important;grid-template-columns:1fr 1fr !important;width:100% !important}
  .port-trips-modal-v2 .port-trip-mini-actions .btn{width:100% !important;min-height:46px !important;padding:9px 8px !important}
  .port-trips-modal-v2 .route-preview-scroll{scroll-snap-type:x proximity !important;-webkit-overflow-scrolling:touch !important}

  #view-ports .leaflet-popup-content{min-width:205px !important;max-width:72vw !important}
  #view-ports .port-map-popup{padding:13px !important}

  .timeline-trip-details{padding:0 13px 13px !important}
  .timeline-trip-stats{gap:8px !important}
  .timeline-trip-actions .btn{width:100% !important;min-height:46px !important}
}


/* Port Detail bottom Done action — matches the full-screen MyVoyage Sea sheets. */
.port-trips-modal-footer{
  position:sticky !important;
  bottom:0 !important;
  z-index:5 !important;
  padding:10px 18px calc(10px + env(safe-area-inset-bottom,0px)) !important;
  border-top:1px solid color-mix(in srgb, var(--surface-border,#d9e2ec) 74%, #1daee8 26%) !important;
  background:color-mix(in srgb, var(--surface,#fff) 94%, transparent) !important;
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
}
.port-trips-done-btn{
  width:100% !important;
  min-height:48px !important;
  border-radius:999px !important;
  font-weight:900 !important;
}

/* ---------- Dark / night detail pass ---------- */
html[data-theme="dark"] .port-trips-modal-v2,
body.dark .port-trips-modal-v2,
.dark-mode .port-trips-modal-v2,
html[data-theme="dark"] #view-ports .port-stat-row[open],
body.dark #view-ports .port-stat-row[open],
.dark-mode #view-ports .port-stat-row[open]{
  background:
    radial-gradient(circle at 0 0, rgba(14,165,233,.13), transparent 34%),
    radial-gradient(circle at 100% 0, rgba(7,91,169,.11), transparent 31%),
    var(--surface,#111827) !important;
}
html[data-theme="dark"] .port-trips-modal-header-v2,
body.dark .port-trips-modal-header-v2,
.dark-mode .port-trips-modal-header-v2{
  background:color-mix(in srgb, var(--surface,#111827) 91%, transparent) !important;
}
html[data-theme="dark"] .port-trips-modal-v2 .port-detail-stat,
body.dark .port-trips-modal-v2 .port-detail-stat,
.dark-mode .port-trips-modal-v2 .port-detail-stat,
html[data-theme="dark"] .port-trips-modal-v2 .port-detail-ship-chip,
body.dark .port-trips-modal-v2 .port-detail-ship-chip,
.dark-mode .port-trips-modal-v2 .port-detail-ship-chip,
html[data-theme="dark"] .port-trips-modal-v2 .port-trip-mini-card,
body.dark .port-trips-modal-v2 .port-trip-mini-card,
.dark-mode .port-trips-modal-v2 .port-trip-mini-card,
html[data-theme="dark"] #view-ports .port-journal-card,
body.dark #view-ports .port-journal-card,
.dark-mode #view-ports .port-journal-card,
html[data-theme="dark"] #view-ports .port-trip-item,
body.dark #view-ports .port-trip-item,
.dark-mode #view-ports .port-trip-item,
html[data-theme="dark"] #view-ports .port-trip-excursions,
body.dark #view-ports .port-trip-excursions,
.dark-mode #view-ports .port-trip-excursions,
html[data-theme="dark"] .timeline-trip-stats > span,
body.dark .timeline-trip-stats > span,
.dark-mode .timeline-trip-stats > span,
html[data-theme="dark"] .timeline-trip-newports,
body.dark .timeline-trip-newports,
.dark-mode .timeline-trip-newports{
  background:color-mix(in srgb, var(--surface,#111827) 95%, #0c4a6e 5%) !important;
  border-color:color-mix(in srgb, var(--surface-border,#334155) 78%, #1daee8 22%) !important;
}
html[data-theme="dark"] #view-ports .leaflet-popup-content-wrapper,
body.dark #view-ports .leaflet-popup-content-wrapper,
.dark-mode #view-ports .leaflet-popup-content-wrapper,
html[data-theme="dark"] #view-ports .leaflet-popup-tip,
body.dark #view-ports .leaflet-popup-tip,
.dark-mode #view-ports .leaflet-popup-tip{
  background:var(--surface,#111827) !important;
  color:var(--text,#f8fafc) !important;
}
html[data-theme="dark"] #view-ports .port-map-popup .pmp-ship-chip,
body.dark #view-ports .port-map-popup .pmp-ship-chip,
.dark-mode #view-ports .port-map-popup .pmp-ship-chip,
html[data-theme="dark"] .timeline-trip-route .route-preview-scroll,
body.dark .timeline-trip-route .route-preview-scroll,
.dark-mode .timeline-trip-route .route-preview-scroll,
html[data-theme="dark"] .port-trips-modal-v2 .route-preview-scroll,
body.dark .port-trips-modal-v2 .route-preview-scroll,
.dark-mode .port-trips-modal-v2 .route-preview-scroll{
  background:color-mix(in srgb, var(--surface,#111827) 94%, #0c4a6e 6%) !important;
  border-color:color-mix(in srgb, var(--surface-border,#334155) 78%, #38bdf8 22%) !important;
}

/* =========================================================
   MyVoyage Sea v109 — compact expanded Port Explorer history
   Keeps Cruise Log behavior/data untouched.
   ========================================================= */
#view-ports .port-stat-trips{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:start !important;
  gap:12px !important;
  padding:14px 16px 18px !important;
}
#view-ports .port-trip-item{
  position:relative !important;
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  gap:8px 10px !important;
  padding:13px !important;
  border-radius:18px !important;
  min-width:0 !important;
  box-shadow:0 8px 22px rgba(15,23,42,.045) !important;
}
#view-ports .port-trip-item > .trip-pill{
  align-self:start !important;
  margin-top:1px !important;
}
#view-ports .port-trip-main{min-width:0 !important}
#view-ports .trip-line{
  display:block !important;
  font-size:.94rem !important;
  line-height:1.35 !important;
  overflow-wrap:anywhere !important;
}
#view-ports .port-trip-excursions{
  display:grid !important;
  gap:6px !important;
  margin-top:9px !important;
  padding:7px !important;
  border:0 !important;
  background:transparent !important;
}
#view-ports .port-exc-item{
  display:flex !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:6px !important;
  min-height:36px !important;
  padding:7px 9px !important;
  border:1px solid color-mix(in srgb,#22c55e 24%,var(--surface-border,#d9e2ec)) !important;
  border-radius:12px !important;
  background:color-mix(in srgb,var(--surface,#fff) 93%,#dcfce7 7%) !important;
}
#view-ports .port-exc-item .trip-pill{flex:0 0 auto !important}
#view-ports .port-exc-name,#view-ports .port-exc-link{font-weight:800 !important;min-width:0 !important}
#view-ports .port-exc-meta{font-size:.78rem !important;color:var(--muted,#64748b) !important}
#view-ports .port-trip-actions-wrap{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  margin-top:9px !important;
  padding-top:9px !important;
  border-top:1px solid color-mix(in srgb,var(--surface-border,#d9e2ec) 84%,transparent) !important;
}
#view-ports .port-trip-memory-status{
  margin:0 !important;
  min-height:32px !important;
  display:inline-flex !important;
  align-items:center !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  font-size:.78rem !important;
  font-weight:800 !important;
}
#view-ports .port-trip-actions{margin-left:auto !important;gap:6px !important}
#view-ports .port-trip-actions .btn{
  min-height:36px !important;
  padding:7px 10px !important;
  border-radius:11px !important;
  font-size:.8rem !important;
}
#view-ports .port-journal-grid{gap:10px !important;padding-top:14px !important}
#view-ports .port-journal-card{padding:12px 13px !important;box-shadow:none !important}
#view-ports .port-journal-title{margin-bottom:7px !important}
#view-ports .port-journal-list{line-height:1.42 !important}

@media (max-width:820px){
  #view-ports .port-stat-trips{grid-template-columns:1fr !important;padding:10px 12px 15px !important}
  #view-ports .port-journal-grid{grid-template-columns:1fr !important;padding:12px 12px 3px !important}
  #view-ports .port-trip-item{padding:12px !important}
  #view-ports .port-trip-actions-wrap{align-items:stretch !important}
  #view-ports .port-trip-actions{width:100% !important;margin-left:0 !important;display:grid !important;grid-template-columns:1fr 1fr !important}
  #view-ports .port-trip-actions .btn{min-height:44px !important;width:100% !important}
}
@media (max-width:430px){
  #view-ports .port-trip-item{grid-template-columns:1fr !important}
  #view-ports .port-trip-item > .trip-pill{justify-self:start !important}
  #view-ports .port-trip-actions{grid-template-columns:1fr !important}
}
html[data-theme="dark"] #view-ports .port-exc-item,
body.dark #view-ports .port-exc-item,
.dark-mode #view-ports .port-exc-item{
  background:color-mix(in srgb,var(--surface,#111827) 93%,#14532d 7%) !important;
  border-color:color-mix(in srgb,var(--surface-border,#334155) 78%,#22c55e 22%) !important;
}


/* =========================================================
   MyVoyage Sea v110 — expanded port voyage-card polish
   ========================================================= */
#view-ports .port-stat-trips{
  display:block !important;
  columns:2 !important;
  column-gap:12px !important;
}
#view-ports .port-trip-item{
  display:grid !important;
  width:100% !important;
  box-sizing:border-box !important;
  break-inside:avoid !important;
  margin:0 0 12px !important;
}
#view-ports .trip-line{margin:0 !important}
#view-ports .port-trip-voyage-name{
  display:block !important;
  font-size:.9rem !important;
  line-height:1.3 !important;
  font-weight:800 !important;
  letter-spacing:-.012em !important;
  color:var(--text,#0f172a) !important;
}
#view-ports .port-trip-voyage-meta{
  display:block !important;
  margin-top:4px !important;
  font-size:.78rem !important;
  line-height:1.35 !important;
  font-weight:650 !important;
  color:var(--muted,#64748b) !important;
}
#view-ports .port-trip-actions-wrap{
  display:grid !important;
  grid-template-columns:minmax(0,auto) minmax(0,1fr) !important;
  align-items:center !important;
  gap:8px !important;
}
#view-ports .port-trip-memory-status{justify-self:start !important}
#view-ports .port-trip-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  width:100% !important;
  margin:0 !important;
}
#view-ports .port-trip-actions .btn{
  width:100% !important;
  white-space:normal !important;
  line-height:1.2 !important;
}
@media (max-width:820px){
  #view-ports .port-stat-trips{columns:1 !important}
  #view-ports .port-trip-actions-wrap{grid-template-columns:1fr !important}
  #view-ports .port-trip-actions{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:430px){
  #view-ports .port-trip-actions{grid-template-columns:1fr !important}
}
html[data-theme="dark"] #view-ports .port-trip-voyage-name,
body.dark #view-ports .port-trip-voyage-name,
.dark-mode #view-ports .port-trip-voyage-name{color:var(--text,#f8fafc) !important}

/* =========================================================
   MyVoyage Sea v111 — Port Explorer filter/toggle consistency
   Match Edit Voyage On/Off control language.
   ========================================================= */
#view-ports .cruise-log-v2-actions{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(96px,1fr)) !important;
  gap:10px !important;
  align-items:stretch !important;
}
#view-ports .ports-quick-filter{
  display:contents !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#view-ports .ports-filter-btn,
#view-ports .cruise-log-v2-toggle{
  width:100% !important;
  min-width:0 !important;
  min-height:44px !important;
  margin:0 !important;
  padding:10px 14px !important;
  border:1px solid var(--line,var(--surface-border,#cfd9e5)) !important;
  border-radius:999px !important;
  background:color-mix(in srgb,var(--surface,#fff) 94%,#f3f6f9 6%) !important;
  color:var(--muted,#64748b) !important;
  box-shadow:none !important;
  font-weight:800 !important;
  line-height:1 !important;
  text-align:center !important;
  white-space:nowrap !important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease !important;
}
#view-ports .ports-filter-btn.is-active,
#view-ports .ports-filter-btn[aria-pressed="true"],
#view-ports .cruise-log-v2-toggle[aria-expanded="true"]{
  border-color:rgba(16,185,129,.45) !important;
  background:rgba(16,185,129,.12) !important;
  color:#087a55 !important;
  box-shadow:none !important;
}
#view-ports .ports-filter-btn:active,
#view-ports .cruise-log-v2-toggle:active,
#view-ports .port-favorite-btn:active{
  transform:scale(.985) !important;
}

/* Favorite uses the same neutral -> green selected language. */
#view-ports .port-favorite-btn{
  min-width:96px !important;
  min-height:40px !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  border:1px solid var(--line,var(--surface-border,#cfd9e5)) !important;
  background:color-mix(in srgb,var(--surface,#fff) 94%,#f3f6f9 6%) !important;
  color:var(--muted,#64748b) !important;
  box-shadow:none !important;
  font-weight:800 !important;
}
#view-ports .port-favorite-btn.is-favorite,
#view-ports .port-favorite-btn[aria-pressed="true"]{
  border-color:rgba(16,185,129,.45) !important;
  background:rgba(16,185,129,.12) !important;
  color:#087a55 !important;
}

body:not(.light) #view-ports .ports-filter-btn,
body:not(.light) #view-ports .cruise-log-v2-toggle,
body:not(.light) #view-ports .port-favorite-btn{
  background:rgba(255,255,255,.045) !important;
  border-color:rgba(148,163,184,.30) !important;
  color:var(--muted,#a8b3c7) !important;
}
body:not(.light) #view-ports .ports-filter-btn.is-active,
body:not(.light) #view-ports .ports-filter-btn[aria-pressed="true"],
body:not(.light) #view-ports .cruise-log-v2-toggle[aria-expanded="true"],
body:not(.light) #view-ports .port-favorite-btn.is-favorite,
body:not(.light) #view-ports .port-favorite-btn[aria-pressed="true"]{
  border-color:rgba(52,211,153,.46) !important;
  background:rgba(16,185,129,.17) !important;
  color:#6ee7b7 !important;
}

@media(max-width:700px){
  #view-ports .cruise-log-v2-actions{
    width:100% !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  #view-ports .ports-filter-btn,
  #view-ports .cruise-log-v2-toggle{
    min-height:46px !important;
    padding:10px 8px !important;
    font-size:.82rem !important;
  }
  #view-ports .port-favorite-btn{
    min-width:88px !important;
    min-height:42px !important;
  }
}

/* ==========================================================
   v128 · Cruise Timeline mobile full-screen controls
   - use the same X + Done pattern as other MyVoyage Sea modals
   - hide the bottom app navigation while the timeline is open
   ========================================================== */
@media (max-width:640px){
  body.timeline-modal-open .mobile-tabbar{
    display:none !important;
    visibility:hidden !important;
  }
  body.timeline-modal-open{
    padding-bottom:0 !important;
  }
  .timeline-modal{
    z-index:2147483600 !important;
  }
  .timeline-modal-dialog{
    min-height:100dvh !important;
    max-height:100dvh !important;
  }
  .timeline-modal-header{
    flex:0 0 auto !important;
  }
  .timeline-modal-close-top{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 !important;
    border-radius:999px !important;
    font-size:0 !important;
    flex:0 0 44px !important;
  }
  .timeline-modal-close-top::before{
    content:"✕";
    font-size:1.05rem;
    line-height:1;
    font-weight:900;
  }
  .timeline-modal-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    padding-bottom:20px !important;
  }
  .timeline-modal-footer{
    position:relative !important;
    bottom:auto !important;
    flex:0 0 auto !important;
    z-index:5 !important;
  }
  .timeline-modal-close-bottom{
    display:flex !important;
    width:100% !important;
    min-height:50px !important;
  }
}

/* v189 — Cruise Log mobile map control polish */
@media (max-width:640px){
  #view-ports .cruise-log-map-card .ports-map-wrap{
    border-radius:18px !important;
    overflow:hidden !important;
  }
  #view-ports .cruise-log-map-card #ports-map{
    min-height:370px !important;
    height:52vh !important;
    max-height:480px !important;
  }
  #view-ports .cruise-log-map-card .ports-map-legend{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:calc(100% - 20px) !important;
    max-width:none !important;
    left:10px !important;
    right:10px !important;
    bottom:10px !important;
    padding:5px !important;
    gap:4px !important;
    overflow:visible !important;
    border-radius:14px !important;
  }
  #view-ports .cruise-log-map-card .ports-map-legend .pml-item{
    width:100% !important;
    min-width:0 !important;
    min-height:36px !important;
    padding:6px 4px !important;
    justify-content:center !important;
    gap:5px !important;
    font-size:.72rem !important;
    white-space:nowrap !important;
    overflow:hidden !important;
  }
  #view-ports .cruise-log-map-card .ports-map-legend .pml-swatch{
    flex:0 0 auto !important;
  }
  #view-ports .ports-route-context{
    padding:10px 12px !important;
    gap:6px !important;
  }
  #view-ports .ports-route-context-titlebar{
    display:block !important;
    min-width:0 !important;
  }
  #view-ports .ports-route-context-main{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    width:100% !important;
  }
  #view-ports .ports-route-context-label{
    flex:0 0 auto !important;
    font-size:.76rem !important;
  }
  #view-ports .ports-route-context-name{
    display:block !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:.9rem !important;
  }
  #view-ports .ports-route-context-meta{
    margin-top:3px !important;
    font-size:.72rem !important;
    line-height:1.25 !important;
  }
  #view-ports .ports-route-map-toolbar{
    left:10px !important;
    right:10px !important;
    bottom:58px !important;
    width:auto !important;
    display:grid !important;
    grid-template-columns:1.25fr 1fr 1fr !important;
    gap:6px !important;
    padding:6px !important;
    border-radius:14px !important;
  }
  #view-ports .ports-route-map-toolbar .route-pill-btn{
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:7px 6px !important;
    font-size:.76rem !important;
    white-space:nowrap !important;
  }
  #view-ports .ports-route-dock-progress{
    grid-column:1 / -1 !important;
    height:6px !important;
    min-height:6px !important;
    margin:0 !important;
  }
  #ports-route-timeline .ports-playback-controls{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    overflow:visible !important;
    gap:6px !important;
  }
  #ports-route-timeline .ports-playback-controls .btn{
    width:100% !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:7px 5px !important;
  }
  #ports-route-timeline .ports-playback-day{
    grid-column:1 / -1 !important;
    width:100% !important;
    margin:0 !important;
    text-align:center !important;
    white-space:normal !important;
  }
}

/* v190 — Cruise Log mobile Route Replay layout */
@media (max-width:640px){
  /* Treat the map card as a vertical mobile control stack instead of layering
     every control on top of the Leaflet canvas. */
  #view-ports .cruise-log-map-card .ports-map-wrap{
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    background:var(--card,#fff) !important;
  }
  #view-ports .cruise-log-map-card .ports-map-legend{
    position:static !important;
    order:1 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    padding:8px !important;
    gap:6px !important;
    border:0 !important;
    border-bottom:1px solid var(--border,rgba(148,163,184,.28)) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
  }
  #view-ports .cruise-log-map-card .ports-map-legend .pml-item{
    min-height:40px !important;
    border:1px solid var(--border,rgba(148,163,184,.3)) !important;
    border-radius:999px !important;
    background:var(--card,#fff) !important;
    font-size:.76rem !important;
    font-weight:800 !important;
  }
  #view-ports .cruise-log-map-card #ports-map{
    order:2 !important;
    width:100% !important;
    min-height:390px !important;
    height:52vh !important;
    max-height:500px !important;
  }
  #view-ports .cruise-log-map-card #ports-map-status{order:4 !important}

  /* Route actions now live below the map rather than covering its legend. */
  #view-ports .ports-route-map-toolbar{
    position:static !important;
    order:3 !important;
    display:none !important;
    grid-template-columns:1.35fr 1fr 1fr !important;
    width:auto !important;
    margin:0 !important;
    padding:9px !important;
    gap:7px !important;
    border:0 !important;
    border-top:1px solid var(--border,rgba(148,163,184,.28)) !important;
    border-radius:0 !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    background:var(--card,#fff) !important;
  }
  #view-ports .ports-route-map-toolbar.is-visible{display:grid !important}
  #view-ports .ports-route-map-toolbar .route-pill-btn{
    min-height:42px !important;
    border-radius:999px !important;
    font-size:.78rem !important;
    font-weight:850 !important;
  }
  #view-ports #ports-route-replay::before{content:'▶ '}

  /* Give the selected voyage enough room to identify itself. */
  #view-ports .ports-route-context{padding:12px !important}
  #view-ports .ports-route-context-main{align-items:flex-start !important}
  #view-ports .ports-route-context-name{
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    line-height:1.2 !important;
  }
  #view-ports .route-preview-scroll{
    overflow-x:auto !important;
    overscroll-behavior-x:contain !important;
    -webkit-overflow-scrolling:touch !important;
    scrollbar-width:none !important;
  }
  #view-ports .route-preview-scroll::-webkit-scrollbar{display:none !important}
  #view-ports .route-preview-track{width:max-content !important;min-width:100% !important}

  /* Playback becomes one compact controller above the map. */
  #ports-route-timeline .ports-playback-controls{
    display:grid !important;
    grid-template-columns:1fr 1.2fr 1fr !important;
    gap:7px !important;
    padding-top:9px !important;
    border-top:1px solid var(--border,rgba(148,163,184,.24)) !important;
  }
  #ports-route-timeline .ports-playback-controls .btn{
    min-height:42px !important;
    padding:7px 5px !important;
    border-radius:999px !important;
    font-size:.72rem !important;
    white-space:nowrap !important;
  }
  #ports-route-timeline .ports-playback-day{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    padding:2px 4px 4px !important;
    font-size:.8rem !important;
    font-weight:850 !important;
    text-align:center !important;
  }
  #ports-route-timeline [data-playback-prev],
  #ports-route-timeline [data-playback-toggle],
  #ports-route-timeline [data-playback-next]{grid-row:2 !important}

  /* Keep the playback day banner clear of Leaflet's top-right control. */
  #view-ports #ports-map-day-banner{
    left:74px !important;
    right:74px !important;
    width:auto !important;
    max-width:calc(100% - 148px) !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    pointer-events:none !important;
  }
}

html[data-theme="dark"] #view-ports .cruise-log-map-card .ports-map-legend,
body.dark #view-ports .cruise-log-map-card .ports-map-legend,
.dark-mode #view-ports .cruise-log-map-card .ports-map-legend,
html[data-theme="dark"] #view-ports .ports-route-map-toolbar,
body.dark #view-ports .ports-route-map-toolbar,
.dark-mode #view-ports .ports-route-map-toolbar{
  background:var(--card,#111827) !important;
}

/* v191 — mobile Cruise Log: route card owns playback; map stays clean */
@media (max-width:640px){
  #view-ports .ports-map-wrap{display:flex !important;flex-direction:column !important;overflow:visible !important;}
  #view-ports .ports-map-legend{order:0 !important;position:static !important;margin:0 0 8px !important;border:1px solid var(--border,rgba(148,163,184,.28)) !important;border-radius:14px !important;padding:6px !important;background:var(--card,#fff) !important;}
  #view-ports #ports-map{order:1 !important;border-radius:16px !important;overflow:hidden !important;}
  #view-ports #ports-map-status{order:2 !important;}
  #view-ports .ports-route-map-toolbar{display:none !important;}
  #view-ports #ports-route-replay{display:none !important;}

  /* Exit belongs to the route header, not the map. */
  #view-ports .ports-route-context-titlebar{display:grid !important;grid-template-columns:minmax(0,1fr) auto !important;gap:8px !important;align-items:start !important;}
  #view-ports #ports-route-clear.mvb-mobile-route-exit{display:inline-flex !important;align-items:center !important;justify-content:center !important;min-height:36px !important;padding:6px 10px !important;border-radius:999px !important;font-size:.7rem !important;white-space:nowrap !important;}
  #view-ports #ports-route-clear.mvb-mobile-route-exit::before{content:'✕ ';}

  /* Center is the only extra map action and behaves like a Leaflet control. */
  #view-ports #ports-route-center.mvb-mobile-map-center{display:flex !important;position:absolute !important;z-index:800 !important;right:10px !important;bottom:10px !important;width:44px !important;height:44px !important;min-width:44px !important;padding:0 !important;border-radius:12px !important;align-items:center !important;justify-content:center !important;font-size:0 !important;box-shadow:0 2px 8px rgba(15,23,42,.18) !important;background:var(--card,#fff) !important;}
  #view-ports #ports-route-center.mvb-mobile-map-center::after{content:'◎';font-size:1.45rem !important;line-height:1 !important;}

  #view-ports .ports-route-context-name{display:block !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;-webkit-line-clamp:unset !important;line-height:1.18 !important;}
  #view-ports #ports-map-day-banner{left:72px !important;right:72px !important;max-width:none !important;font-size:.72rem !important;}
}
\n\n/* v192 — final mobile Cruise Log replay cleanup */
@media (max-width:640px){
  /* Old bottom toolbar must never cover the map on phones. */
  #view-ports #ports-route-map-toolbar,
  #view-ports .ports-route-map-toolbar,
  #view-ports #ports-route-replay{display:none !important;visibility:hidden !important;pointer-events:none !important;}

  /* Give the route heading room to wrap naturally. */
  #view-ports .ports-route-context-titlebar{grid-template-columns:minmax(0,1fr) auto !important;}
  #view-ports .ports-route-context-main{min-width:0 !important;display:flex !important;align-items:flex-start !important;gap:5px !important;flex-wrap:wrap !important;}
  #view-ports .ports-route-context-name{min-width:0 !important;white-space:normal !important;overflow:visible !important;text-overflow:clip !important;display:inline !important;line-height:1.2 !important;}
  #view-ports .ports-route-context-meta{grid-column:1 / -1 !important;}

  /* Exit is part of the replay card instead of a map overlay. */
  #view-ports #ports-route-clear.mvb-mobile-route-exit{position:static !important;display:inline-flex !important;visibility:visible !important;pointer-events:auto !important;}

  /* Center is a compact map control. */
  #view-ports #ports-map{position:relative !important;}
  #view-ports #ports-route-center.mvb-mobile-map-center{
    display:flex !important;visibility:visible !important;pointer-events:auto !important;
    position:absolute !important;right:10px !important;bottom:12px !important;z-index:900 !important;
  }
}

/* v194 — mobile Route Replay header + map banner cleanup */
@media (max-width:640px){
  /* Give the voyage name the full card width. Ship/date and Exit sit below it. */
  #view-ports .ports-route-context-titlebar{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:8px !important;
  }
  #view-ports .ports-route-context-main{
    order:1 !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }
  #view-ports .ports-route-context-label{
    display:inline !important;
    white-space:nowrap !important;
  }
  #view-ports .ports-route-context-name{
    display:inline !important;
    width:auto !important;
    min-width:0 !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    line-height:1.22 !important;
  }
  #view-ports .ports-route-context-meta{
    order:2 !important;
    width:100% !important;
    text-align:left !important;
    white-space:normal !important;
  }
  #view-ports #ports-route-clear.mvb-mobile-route-exit{
    order:3 !important;
    align-self:flex-start !important;
    width:auto !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:7px 14px !important;
  }

  /* The replay card already shows the active day/port. Remove the duplicate
     Leaflet banner so it cannot collide with zoom or All Ports controls. */
  #view-ports #ports-map-day-banner{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* =========================================================
   v211 — Voyages header actions: one MyVoyage Sea toolbar
   Keeps Hide Past as a real checkbox while matching the
   Import Reservation and Add Voyage controls visually.
========================================================= */
#view-trips .trip-header-actions{
  display:flex;
  align-items:stretch;
  gap:10px;
  flex-wrap:wrap;
}

#view-trips .trip-header-actions > .check-pill,
#view-trips .trip-header-actions > #import-reservation-btn,
#view-trips .trip-header-actions > #open-add-trip{
  min-height:48px !important;
  height:48px;
  padding:0 18px !important;
  border-radius:999px !important;
  border:1px solid var(--border-strong) !important;
  background:var(--surface-raised) !important;
  color:var(--text) !important;
  box-shadow:none !important;
  font-size:.78rem !important;
  font-weight:750 !important;
  line-height:1 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  white-space:nowrap;
  box-sizing:border-box;
}

#view-trips .trip-header-actions > .check-pill{
  cursor:pointer;
  user-select:none;
}

#view-trips .trip-header-actions > .check-pill input{
  appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  min-width:20px;
  margin:0;
  border-radius:7px;
  border:2px solid var(--muted-2);
  background:var(--surface);
  display:grid;
  place-items:center;
  transition:background .16s ease,border-color .16s ease,transform .16s ease;
}

#view-trips .trip-header-actions > .check-pill input::after{
  content:"";
  width:9px;
  height:5px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg) scale(0);
  transform-origin:center;
  transition:transform .14s ease;
  margin-top:-2px;
}

#view-trips .trip-header-actions > .check-pill input:checked{
  background:var(--accent-strong);
  border-color:var(--accent-strong);
}

#view-trips .trip-header-actions > .check-pill input:checked::after{
  transform:rotate(-45deg) scale(1);
}

#view-trips .trip-header-actions > .check-pill:has(input:checked){
  background:var(--accent-soft) !important;
  border-color:var(--accent-border) !important;
}

#view-trips .trip-header-actions > #open-add-trip{
  background:var(--accent-soft) !important;
  border-color:var(--accent-border) !important;
  color:var(--text) !important;
  box-shadow:none !important;
}

#view-trips .trip-header-actions > #open-add-trip:hover,
#view-trips .trip-header-actions > #import-reservation-btn:hover,
#view-trips .trip-header-actions > .check-pill:hover{
  background:var(--accent-soft) !important;
  border-color:var(--accent-border) !important;
  color:var(--text) !important;
}

#view-trips .trip-header-actions > .check-pill input:focus-visible{
  outline:3px solid var(--accent-soft);
  outline-offset:3px;
}

@media (max-width:700px){
  #view-trips .card-header{
    gap:12px;
  }
  #view-trips .trip-header-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
  }
  #view-trips .trip-header-actions > .check-pill,
  #view-trips .trip-header-actions > #import-reservation-btn,
  #view-trips .trip-header-actions > #open-add-trip{
    width:100%;
    min-width:0;
    height:48px;
    padding:0 12px !important;
    font-size:.75rem !important;
  }
  #view-trips .trip-header-actions > .check-pill{
    grid-column:1 / -1;
  }
}

@media (max-width:390px){
  #view-trips .trip-header-actions{
    grid-template-columns:1fr;
  }
  #view-trips .trip-header-actions > .check-pill{
    grid-column:auto;
  }
}

/* v212 — Voyages: whole-pill Hide Past toggle */
#view-trips .trip-header-actions > .check-pill input{
  position:absolute !important;
  inline-size:1px !important;
  block-size:1px !important;
  min-width:0 !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
  clip-path:inset(50%) !important;
}
#view-trips .trip-header-actions > .check-pill input::after{ content:none !important; }
#view-trips .trip-header-actions > .check-pill::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  border-radius:50%;
  border:2px solid var(--muted-2);
  background:transparent;
  box-sizing:border-box;
  transition:background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
#view-trips .trip-header-actions > .check-pill:has(input:checked)::before{
  content:"✓";
  display:grid;
  place-items:center;
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  color:#fff;
  font-size:12px;
  font-weight:900;
  line-height:1;
}
#view-trips .trip-header-actions > .check-pill:has(input:focus-visible){
  outline:3px solid var(--accent-soft);
  outline-offset:3px;
}

/* v213 — Voyages: clean whole-pill Hide Past toggle (no indicator icon) */
#view-trips .trip-header-actions > .check-pill::before,
#view-trips .trip-header-actions > .check-pill:has(input:checked)::before{
  content:none !important;
  display:none !important;
}
#view-trips .trip-header-actions > .check-pill:has(input:focus-visible){
  outline:3px solid var(--accent-soft);
  outline-offset:3px;
}


/* v214 — Voyages: neutral Add Voyage pill + subtle plus pulse */
#view-trips .trip-header-actions > #open-add-trip{
  background:var(--surface-raised) !important;
  border-color:var(--border-strong) !important;
  color:var(--text) !important;
}
#view-trips .trip-header-actions > #open-add-trip:hover{
  background:var(--accent-soft) !important;
  border-color:var(--accent-border) !important;
}
#view-trips #open-add-trip .mvb-add-voyage-plus{
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  flex:0 0 18px;
  font-size:1.22rem;
  font-weight:850;
  line-height:1;
  color:var(--accent-strong);
  transform-origin:center;
  animation:mvbAddVoyagePlusPulse 2.8s ease-in-out infinite;
}
@keyframes mvbAddVoyagePlusPulse{
  0%, 72%, 100%{ transform:scale(1); }
  82%{ transform:scale(1.12); }
  90%{ transform:scale(1); }
}
@media (prefers-reduced-motion: reduce){
  #view-trips #open-add-trip .mvb-add-voyage-plus{ animation:none !important; }
}

/* =========================================================
   MyVoyageBoard — Login-to-Dashboard Brand Unification v250
   2026-08-29
   Visual-only pass: preserves dashboard layout and behavior.
   Light mode receives the stronger login-page brand identity;
   dark/night mode remains on the established Sea Theme.
   ========================================================= */

/* Give the authenticated app the same icy-blue atmosphere as login. */
body.light{
  --page-bg:
    radial-gradient(circle at 16% 0%, rgba(120,210,255,.24), transparent 34%),
    radial-gradient(circle at 88% 2%, rgba(7,91,169,.08), transparent 32%),
    linear-gradient(180deg,#edf9ff 0%,#f7fbff 50%,#eef8ff 100%);
}
body.light .app-shell{
  background:
    radial-gradient(circle at 0 0, rgba(126,214,255,.16), transparent 30%),
    linear-gradient(145deg,#ffffff 0%,#f1f9ff 52%,#eaf6ff 100%);
  border-color:rgba(7,91,169,.18);
  box-shadow:0 24px 58px rgba(7,91,169,.12);
}
body.light .app-shell::before{
  background:
    radial-gradient(circle at 0 0, rgba(34,174,234,.13), transparent 46%),
    radial-gradient(circle at 100% 0, rgba(7,91,169,.08), transparent 52%);
  opacity:1;
}

/* Stronger top-left identity without changing its size or layout. */
body.light .title h1,
body.light .title #app-title{
  color:#082f55;
  font-weight:850;
  letter-spacing:-.015em;
}
body.light .title .brand-promise{
  color:#496b83;
  font-weight:520;
}
body.light .title .brand-tagline{
  color:#0878bd;
  font-weight:850;
}
body.light .logo-img{
  box-shadow:0 8px 22px rgba(7,91,169,.20),0 0 0 1px rgba(7,91,169,.08);
}

/* Navigation now uses the exact ocean-blue family seen at login. */
body.light .tabs{
  background:rgba(255,255,255,.82);
  border-color:rgba(7,91,169,.16);
  box-shadow:0 8px 24px rgba(7,91,169,.07);
}
body.light .tab-btn{
  color:#496b83;
  font-weight:650;
}
body.light .tab-btn:hover{
  color:#0a4e82;
  background:rgba(8,120,189,.06);
}
body.light .tab-btn.active{
  background:linear-gradient(135deg,#075ba9 0%,#0878bd 100%);
  color:#fff;
  box-shadow:0 8px 18px rgba(7,91,169,.24),0 0 0 1px rgba(255,255,255,.18) inset;
}

/* Dashboard: keep the existing white-card work surface, but strengthen identity. */
body.light #view-dashboard .grid > .card{
  background:rgba(255,255,255,.94);
  border-color:rgba(7,91,169,.14);
  box-shadow:0 12px 30px rgba(7,91,169,.07);
}
body.light #view-dashboard .dashboard-overview-title,
body.light #view-dashboard .card-header h2,
body.light #view-dashboard .card-header h3{
  color:#082f55;
}
body.light #view-dashboard .dashboard-edit-icon{
  background:#fff;
  border-color:rgba(7,91,169,.16);
  color:#075ba9;
  box-shadow:0 7px 16px rgba(7,91,169,.09);
}
body.light #view-dashboard .dashboard-edit-icon:hover,
body.light #view-dashboard .dashboard-edit-icon[aria-pressed="true"]{
  background:linear-gradient(135deg,#075ba9,#0878bd);
  border-color:transparent;
  color:#fff;
  box-shadow:0 9px 18px rgba(7,91,169,.22);
}

/* KPI cards: same structure, richer nautical text and cleaner blue detailing. */
body.light #view-dashboard .compact-dashboard-kpis .kpi{
  background:linear-gradient(150deg,#ffffff 0%,#fbfdff 70%,#f4faff 100%);
  border-color:rgba(7,91,169,.13);
  box-shadow:0 8px 20px rgba(7,91,169,.065);
}
body.light #view-dashboard .compact-dashboard-kpis .kpi::before{
  background:linear-gradient(90deg,#075ba9 0%,#0878bd 58%,#22aeea 100%);
  opacity:.90;
}
body.light #view-dashboard .compact-dashboard-kpis .kpi-label{
  color:#315a78;
  font-weight:800;
}
body.light #view-dashboard .compact-dashboard-kpis .kpi-value{
  color:#082f55;
  font-weight:850;
}
body.light #view-dashboard .compact-dashboard-kpis .kpi-sub,
body.light #view-dashboard .compact-dashboard-kpis .lat-tracker-meta,
body.light #view-dashboard .compact-dashboard-kpis .lat-tracker-percent{
  color:#55748a;
}

/* Keep secondary dashboard surfaces cool/clean instead of neutral gray. */
body.light #view-dashboard .trip-row,
body.light #view-dashboard .command-center-card,
body.light #view-dashboard .command-center-panel{
  border-color:rgba(7,91,169,.12);
}
body.light #view-dashboard a,
body.light #view-dashboard .link-btn{
  color:#0878bd;
}


/* =========================================================
   v283 — Voyage Replay WOW pass
   Presentation upgrade only: keeps Leaflet + existing data hooks.
========================================================= */
#view-ports .ports-route-context{
  margin:0 0 12px !important;
  padding:16px !important;
  border:1px solid rgba(7,91,169,.18) !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(239,248,255,.92)) !important;
  box-shadow:0 16px 38px rgba(2,52,96,.08) !important;
}
#view-ports .ports-route-context-titlebar{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:8px 16px !important;
  align-items:end !important;
  margin-bottom:12px !important;
}
#view-ports .ports-route-context-main{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
}
#view-ports .ports-route-context-label{
  display:inline-flex !important;
  align-items:center !important;
  min-height:30px !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#075ba9,#0878bd) !important;
  color:#fff !important;
  font-size:.7rem !important;
  font-weight:900 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
}
#view-ports .ports-route-context-name{
  color:#082f5b !important;
  font-size:clamp(1rem,1.6vw,1.3rem) !important;
  font-weight:900 !important;
  line-height:1.15 !important;
}
#view-ports .ports-route-context-meta{
  color:#526b86 !important;
  font-size:.88rem !important;
  font-weight:750 !important;
  white-space:nowrap !important;
}
#view-ports .route-timeline-card{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#view-ports .route-preview-wrap{
  border:1px solid rgba(7,91,169,.12) !important;
  border-radius:17px !important;
  background:rgba(255,255,255,.82) !important;
  padding:7px !important;
}
#view-ports .route-preview-scroll{padding:2px !important;}
#view-ports .route-preview-track{
  display:flex !important;
  align-items:stretch !important;
  gap:6px !important;
  min-width:max-content !important;
}
#view-ports .route-stop{
  min-width:116px !important;
  min-height:58px !important;
  padding:8px 12px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  border:1px solid rgba(148,163,184,.28) !important;
  border-radius:15px !important;
  background:#fff !important;
  color:#173b61 !important;
  box-shadow:0 4px 12px rgba(15,23,42,.04) !important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease !important;
}
#view-ports .route-stop-icon{font-size:1.15rem !important;line-height:1 !important;}
#view-ports .route-stop-copy{display:flex !important;flex-direction:column !important;gap:2px !important;min-width:0 !important;}
#view-ports .route-stop-label{font-size:.78rem !important;font-weight:900 !important;line-height:1.05 !important;white-space:nowrap !important;}
#view-ports .route-stop-day{font-size:.64rem !important;font-weight:750 !important;color:#6b7f95 !important;white-space:nowrap !important;}
#view-ports .route-stop.route-stop-live,
#view-ports .route-stop.route-stop-selected{
  transform:translateY(-2px) !important;
  border-color:#0878bd !important;
  background:linear-gradient(135deg,#075ba9,#0878bd) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(8,120,189,.24) !important;
}
#view-ports .route-stop.route-stop-live .route-stop-day,
#view-ports .route-stop.route-stop-selected .route-stop-day{color:rgba(255,255,255,.82) !important;}
#view-ports .route-arrow{
  align-self:center !important;
  color:#66839f !important;
  font-weight:900 !important;
  font-size:1rem !important;
  padding:0 1px !important;
}
#view-ports .ports-map-wrap{
  position:relative !important;
  border:1px solid rgba(7,91,169,.16) !important;
  border-radius:22px !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#eff9ff,#dff2ff) !important;
  box-shadow:0 20px 44px rgba(2,52,96,.12) !important;
}
#view-ports #ports-map{
  height:clamp(520px,61vh,700px) !important;
  min-height:520px !important;
  border-radius:0 !important;
  filter:saturate(.9) contrast(.98) !important;
}
#view-ports .ports-map-legend{
  position:absolute !important;
  top:14px !important;
  left:14px !important;
  z-index:850 !important;
  display:inline-flex !important;
  gap:2px !important;
  padding:4px !important;
  margin:0 !important;
  border:1px solid rgba(148,163,184,.28) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.12) !important;
  backdrop-filter:blur(10px) !important;
}
#view-ports .ports-map-legend .pml-item{
  min-height:34px !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  font-size:.68rem !important;
  font-weight:800 !important;
}
#view-ports .map-reset-btn{
  min-height:40px !important;
  padding:0 14px !important;
  border:1px solid rgba(148,163,184,.3) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.94) !important;
  color:#123d68 !important;
  font-weight:850 !important;
  box-shadow:0 8px 22px rgba(15,23,42,.12) !important;
}
#view-ports .ports-route-stop-icon{background:transparent !important;border:0 !important;}
#view-ports .ports-route-stop-icon .stop-dot{
  width:20px !important;
  height:20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:3px solid #0878bd !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.9),0 5px 14px rgba(8,120,189,.24) !important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease !important;
}
#view-ports .ports-route-stop-icon .stop-glyph{font-size:.72rem !important;line-height:1 !important;color:#0878bd !important;}
#view-ports .ports-route-stop-icon.is-start .stop-dot,
#view-ports .ports-route-stop-icon.is-end .stop-dot{width:26px !important;height:26px !important;background:#073b72 !important;border-color:#fff !important;}
#view-ports .ports-route-stop-icon.is-start .stop-glyph,
#view-ports .ports-route-stop-icon.is-end .stop-glyph{font-size:.85rem !important;color:#fff !important;}
#view-ports .ports-route-stop-icon.is-reached .stop-dot{background:#0878bd !important;border-color:#fff !important;}
#view-ports .ports-route-stop-icon.is-reached .stop-glyph{color:#fff !important;}
#view-ports .ports-route-stop-icon.is-active .stop-dot{
  transform:scale(1.3) !important;
  background:#0878bd !important;
  border-color:#fff !important;
  box-shadow:0 0 0 7px rgba(56,189,248,.28),0 0 0 14px rgba(56,189,248,.12),0 8px 22px rgba(7,91,169,.35) !important;
}
#view-ports .ports-route-ship-icon{filter:drop-shadow(0 7px 12px rgba(2,36,71,.35)) !important;}
#view-ports .ports-replay-port-card{
  position:absolute !important;
  z-index:900 !important;
  left:18px !important;
  bottom:18px !important;
  width:min(430px,calc(100% - 36px)) !important;
  padding:14px 16px !important;
  border:1px solid rgba(148,163,184,.28) !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.96) !important;
  color:#0c3158 !important;
  box-shadow:0 18px 42px rgba(15,23,42,.18) !important;
  backdrop-filter:blur(14px) !important;
  opacity:0 !important;
  transform:translateY(10px) !important;
  transition:opacity .22s ease,transform .22s ease !important;
  pointer-events:none !important;
}
#view-ports .ports-replay-port-card.is-visible{opacity:1 !important;transform:translateY(0) !important;}
#view-ports .prpc-head{display:flex !important;justify-content:space-between !important;gap:12px !important;align-items:flex-start !important;margin-bottom:11px !important;}
#view-ports .prpc-head>div{display:flex !important;flex-direction:column !important;gap:2px !important;}
#view-ports .prpc-day{font-size:.66rem !important;font-weight:900 !important;text-transform:uppercase !important;letter-spacing:.08em !important;color:#0878bd !important;}
#view-ports .prpc-head strong{font-size:1rem !important;line-height:1.18 !important;}
#view-ports .prpc-status{padding:5px 9px !important;border-radius:999px !important;background:#e4f7ee !important;color:#18794e !important;font-size:.64rem !important;font-weight:900 !important;white-space:nowrap !important;}
#view-ports .prpc-times{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:0 !important;border-top:1px solid rgba(148,163,184,.2) !important;padding-top:10px !important;}
#view-ports .prpc-times>div{display:flex !important;flex-direction:column !important;gap:3px !important;padding:0 10px !important;border-right:1px solid rgba(148,163,184,.2) !important;}
#view-ports .prpc-times>div:first-child{padding-left:0 !important;}
#view-ports .prpc-times>div:last-child{padding-right:0 !important;border-right:0 !important;}
#view-ports .prpc-times span{font-size:.62rem !important;color:#6b7f95 !important;font-weight:750 !important;}
#view-ports .prpc-times b{font-size:.78rem !important;white-space:nowrap !important;}
#ports-route-timeline .ports-playback-controls{
  margin-top:10px !important;
  padding:10px !important;
  display:grid !important;
  grid-template-columns:auto minmax(170px,1fr) auto !important;
  gap:8px !important;
  align-items:center !important;
  border:1px solid rgba(7,91,169,.12) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.78) !important;
}
#ports-route-timeline .ports-playback-controls .btn{
  min-height:42px !important;
  border-radius:999px !important;
  font-weight:850 !important;
}
#ports-route-timeline .ports-playback-controls .btn-primary{
  background:linear-gradient(135deg,#075ba9,#0878bd) !important;
  box-shadow:0 9px 18px rgba(8,120,189,.22) !important;
}
#ports-route-timeline .ports-playback-day{
  grid-column:1/-1 !important;
  grid-row:1 !important;
  text-align:right !important;
  color:#55708d !important;
  font-size:.72rem !important;
  font-weight:850 !important;
}
#ports-route-timeline [data-playback-prev],#ports-route-timeline [data-playback-toggle],#ports-route-timeline [data-playback-next]{grid-row:2 !important;}

html[data-theme="dark"] #view-ports .ports-route-context,
body.dark #view-ports .ports-route-context,
.dark-mode #view-ports .ports-route-context{background:linear-gradient(180deg,rgba(10,29,52,.98),rgba(9,37,65,.96)) !important;border-color:rgba(56,189,248,.2) !important;}
html[data-theme="dark"] #view-ports .ports-route-context-name,
body.dark #view-ports .ports-route-context-name,
.dark-mode #view-ports .ports-route-context-name{color:#eaf6ff !important;}
html[data-theme="dark"] #view-ports .route-preview-wrap,
body.dark #view-ports .route-preview-wrap,
.dark-mode #view-ports .route-preview-wrap,
html[data-theme="dark"] #view-ports .route-stop,
body.dark #view-ports .route-stop,
.dark-mode #view-ports .route-stop,
html[data-theme="dark"] #view-ports .ports-replay-port-card,
body.dark #view-ports .ports-replay-port-card,
.dark-mode #view-ports .ports-replay-port-card{background:rgba(8,27,48,.94) !important;color:#eaf6ff !important;border-color:rgba(125,211,252,.18) !important;}
html[data-theme="dark"] #view-ports .route-stop,
body.dark #view-ports .route-stop,
.dark-mode #view-ports .route-stop{color:#d9efff !important;}

@media (max-width:640px){
  #view-ports .ports-route-context{padding:11px !important;border-radius:17px !important;margin-bottom:8px !important;}
  #view-ports .ports-route-context-titlebar{display:block !important;margin-bottom:8px !important;}
  #view-ports .ports-route-context-main{display:block !important;}
  #view-ports .ports-route-context-label{margin-bottom:7px !important;min-height:27px !important;font-size:.61rem !important;}
  #view-ports .ports-route-context-name{display:block !important;font-size:.95rem !important;margin-bottom:3px !important;}
  #view-ports .ports-route-context-meta{font-size:.72rem !important;white-space:normal !important;}
  #view-ports .route-preview-wrap{margin:0 -3px !important;padding:5px !important;border-radius:14px !important;}
  #view-ports .route-stop{min-width:92px !important;min-height:52px !important;padding:7px 9px !important;border-radius:13px !important;gap:6px !important;}
  #view-ports .route-stop-label{font-size:.67rem !important;max-width:68px !important;overflow:hidden !important;text-overflow:ellipsis !important;}
  #view-ports .route-stop-day{font-size:.58rem !important;}
  #view-ports .route-arrow{font-size:.82rem !important;}
  #view-ports .ports-map-wrap{border-radius:17px !important;}
  #view-ports #ports-map{height:54vh !important;min-height:420px !important;max-height:560px !important;}
  #view-ports .ports-map-legend{top:10px !important;left:10px !important;max-width:calc(100% - 20px) !important;overflow-x:auto !important;}
  #view-ports .ports-map-legend .pml-item{min-height:30px !important;padding:5px 8px !important;font-size:.61rem !important;}
  #view-ports .map-reset-btn{min-height:36px !important;padding:0 10px !important;font-size:.68rem !important;}
  #view-ports .ports-replay-port-card{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    width:auto !important;
    padding:11px 12px !important;
    border-radius:16px !important;
  }
  #view-ports .prpc-head{margin-bottom:8px !important;}
  #view-ports .prpc-head strong{font-size:.9rem !important;}
  #view-ports .prpc-times{padding-top:8px !important;}
  #view-ports .prpc-times>div{padding:0 6px !important;}
  #view-ports .prpc-times span{font-size:.56rem !important;}
  #view-ports .prpc-times b{font-size:.68rem !important;}
  #ports-route-timeline .ports-playback-controls{
    grid-template-columns:1fr 1.15fr 1fr !important;
    padding:7px !important;
    border-radius:14px !important;
  }
  #ports-route-timeline .ports-playback-controls .btn{min-height:40px !important;padding:6px 5px !important;font-size:.65rem !important;}
  #ports-route-timeline .ports-playback-day{text-align:center !important;font-size:.66rem !important;}
}


/* =========================================================
   v284 — Voyage Replay card controls + polish
   Controls now live inside the active-port card on all sizes.
========================================================= */
#view-ports .ports-route-context-name{
  min-width:0 !important;
  max-width:none !important;
  white-space:normal !important;
  overflow:visible !important;
  text-overflow:clip !important;
  overflow-wrap:anywhere !important;
}
#view-ports .route-stop.route-stop-live,
#view-ports .route-stop.route-stop-selected{
  position:relative !important;
  transform:translateY(-3px) scale(1.015) !important;
  box-shadow:0 12px 26px rgba(8,120,189,.30),0 0 0 3px rgba(56,189,248,.12) !important;
}
#view-ports .route-stop.route-stop-live::after,
#view-ports .route-stop.route-stop-selected::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:-8px;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:7px solid #0878bd;
}
#view-ports .ports-route-stop-icon.is-active .stop-dot{
  animation:mvbReplayPortPulse 1.8s ease-out infinite !important;
}
@keyframes mvbReplayPortPulse{
  0%,100%{box-shadow:0 0 0 7px rgba(56,189,248,.26),0 0 0 14px rgba(56,189,248,.10),0 8px 22px rgba(7,91,169,.35)}
  50%{box-shadow:0 0 0 10px rgba(56,189,248,.18),0 0 0 20px rgba(56,189,248,.04),0 10px 26px rgba(7,91,169,.42)}
}
#view-ports .ports-replay-port-card{
  pointer-events:auto !important;
  width:min(470px,calc(100% - 36px)) !important;
  padding:15px 16px 13px !important;
}
#view-ports .prpc-times.is-empty b{color:#8294a8 !important;font-weight:750 !important;}
#view-ports .prpc-actions{
  display:grid !important;
  grid-template-columns:minmax(150px,1.45fr) minmax(92px,.8fr) minmax(82px,.7fr) !important;
  gap:8px !important;
  margin-top:12px !important;
  padding-top:12px !important;
  border-top:1px solid rgba(148,163,184,.22) !important;
}
#view-ports .prpc-actions .prpc-action{
  display:inline-flex !important;
  visibility:visible !important;
  pointer-events:auto !important;
  min-height:42px !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  border-radius:12px !important;
  font-size:.72rem !important;
  font-weight:900 !important;
  white-space:nowrap !important;
}
#view-ports .prpc-actions .prpc-replay{
  background:linear-gradient(135deg,#075ba9,#0878bd) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 8px 18px rgba(8,120,189,.24) !important;
}
#view-ports .prpc-actions .prpc-replay::before{content:'▶';margin-right:7px;font-size:.72rem;}
#view-ports .prpc-actions .prpc-center::before{content:'◎';margin-right:6px;font-size:.9rem;}
#view-ports .prpc-actions .prpc-exit::before{content:'✕';margin-right:6px;font-size:.72rem;}
#view-ports #ports-route-map-toolbar,
#view-ports .ports-route-map-toolbar{display:none !important;visibility:hidden !important;pointer-events:none !important;}
html[data-theme="dark"] #view-ports .prpc-actions,
body.dark #view-ports .prpc-actions,
.dark-mode #view-ports .prpc-actions{border-top-color:rgba(125,211,252,.16) !important;}

@media (max-width:640px){
  #view-ports .ports-replay-port-card{
    left:8px !important;
    right:8px !important;
    bottom:8px !important;
    width:auto !important;
    padding:12px !important;
    border-radius:17px !important;
  }
  #view-ports .prpc-actions{
    grid-template-columns:1.25fr .85fr .72fr !important;
    gap:6px !important;
    margin-top:10px !important;
    padding-top:10px !important;
  }
  #view-ports .prpc-actions .prpc-action{
    min-height:44px !important;
    padding:7px 8px !important;
    font-size:.64rem !important;
    border-radius:11px !important;
  }
  #view-ports .prpc-actions .prpc-replay::before,
  #view-ports .prpc-actions .prpc-center::before,
  #view-ports .prpc-actions .prpc-exit::before{margin-right:4px !important;}
  #view-ports #ports-route-replay,
  #view-ports #ports-route-center,
  #view-ports #ports-route-clear{
    display:inline-flex !important;
    visibility:visible !important;
    pointer-events:auto !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
  }
  #view-ports #ports-route-center::after{content:none !important;}
  #view-ports #ports-route-clear::before{content:none;}
  #view-ports .route-stop.route-stop-live,
  #view-ports .route-stop.route-stop-selected{transform:translateY(-2px) scale(1.01) !important;}
}

@media (prefers-reduced-motion:reduce){
  #view-ports .ports-route-stop-icon.is-active .stop-dot{animation:none !important;}
}


/* =========================================================
   v285 — Smart active-port card avoidance
   Desktop: card slides away from the approaching ship.
   Mobile: card collapses while the ship is moving, expands at ports.
========================================================= */
#view-ports .ports-replay-port-card{
  transition:opacity .22s ease,transform .22s ease,left .36s cubic-bezier(.2,.8,.2,1) !important;
  will-change:left,transform !important;
}
#view-ports .ports-replay-port-card[data-replay-side="right"]{
  box-shadow:0 18px 42px rgba(15,23,42,.18),-8px 0 28px rgba(8,120,189,.08) !important;
}
#view-ports .ports-replay-port-card[data-replay-side="left"]{
  box-shadow:0 18px 42px rgba(15,23,42,.18),8px 0 28px rgba(8,120,189,.08) !important;
}

@media (max-width:640px){
  #view-ports .ports-replay-port-card{
    transition:opacity .22s ease,transform .26s ease,max-height .28s ease,padding .28s ease !important;
    overflow:hidden !important;
  }
  #view-ports .ports-replay-port-card.is-replay-moving:not(.is-port-arrival){
    padding:9px 11px !important;
    max-height:68px !important;
  }
  #view-ports .ports-replay-port-card.is-replay-moving:not(.is-port-arrival) .prpc-times,
  #view-ports .ports-replay-port-card.is-replay-moving:not(.is-port-arrival) .prpc-actions{
    display:none !important;
  }
  #view-ports .ports-replay-port-card.is-replay-moving:not(.is-port-arrival) .prpc-head{
    margin-bottom:0 !important;
    align-items:center !important;
  }
  #view-ports .ports-replay-port-card.is-port-arrival{
    max-height:360px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #view-ports .ports-replay-port-card{transition:none !important;}
}

/* =========================================================
   v286 — Replay card safe area
   Keep the full active-port/action card inside the map viewport.
========================================================= */
@media (min-width:641px){
  #view-ports .ports-replay-port-card{
    bottom:34px !important;
    max-height:calc(100% - 68px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }
}
@media (max-width:640px){
  #view-ports .ports-replay-port-card{
    bottom:14px !important;
    max-height:calc(100% - 28px) !important;
  }
  #view-ports .ports-replay-port-card.is-port-arrival{
    max-height:min(360px,calc(100% - 28px)) !important;
    overflow-y:auto !important;
  }
}


/* =========================================================
   v380 — Cruise Log desktop replay polish
   Keep the animated ship and the full active-port card visible.
========================================================= */
@media (min-width:641px){
  #view-ports .cruise-log-map-card #ports-map{
    height:clamp(430px,52vh,560px) !important;
    min-height:430px !important;
    max-height:560px !important;
  }
  #view-ports .ports-replay-port-card{
    bottom:22px !important;
    max-height:calc(100% - 44px) !important;
    overflow-y:auto !important;
  }
  #view-ports .ports-replay-port-card .prpc-actions{
    position:sticky !important;
    bottom:-13px !important;
    margin-left:-16px !important;
    margin-right:-16px !important;
    padding-left:16px !important;
    padding-right:16px !important;
    padding-bottom:13px !important;
    background:inherit !important;
    z-index:2 !important;
  }
}